jQuery/Javascript -运行函数前(文档).准备好加载图像

我试图获得图像的尺寸，以便调整(或大小)它的长度与宽度的两倍的画布。(所以，对于400x800的图像，我想要一个800x800的画布)。我现在要做的是加载图像两次，一次确定它的大小另一次显示它。我的HTML w/Javascript/JQuery看起来像

<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="1100" height="500">
        </canvas>
    <script>
        $("<img />").attr("src", "test1image.jpg").load(function() {
            /* This is where I'd like to load the image to get its dimensions */
        });
        $(document).ready(
                function() {

                    var imgWidth, imgHeight;
                    var imageData; 
                    var image = new Image();
                    var canvas = document.getElementById("myCanvas");
                    var ctx = canvas.getContext("2d");
                    $(image).load(function() {
                        /* This is where the image is loaded and 
                           inserted into the canvas */
                        ctx.drawImage(image, 0, 0);
                    });
                    image.src = "test1image.jpg"; 
                    imageData = ctx.getImageData(0, 0,
                            image.width,
                            );
                    /* This is just part of the image manipulation, 
                       bland right now */
                    var newImgData = ctx.createImageData(imageData.width,
                            imageData.height);
                    for ( var i = 0; i < newImgData.data.length; i += 4) {
                        newImgData.data[i + 0] = 255;
                        newImgData.data[i + 1] = 0; 
                        newImgData.data[i + 2] = 0; 
                        newImgData.data[i + 3] = 255;       
                    }
                    ctx.putImageData(newImgData, imageData.width, 0);
                });
    </script>
</body>
</html>

有一件事我一直在尝试，但注意到不工作是试图将函数放在(文档)之前。准备好了，但如果(文件)。随时待命总是第一位的。我似乎无法得到图像加载没有画布已经被创建(因为它是在(文档)。准备调用)。有人能解释一下这是怎么回事吗?

谢谢。

我刚试着添加

jQuery(window).load(function() {
            $("<img />").attr("src", "test1image.jpg").load(function() {
                imgWidth = this.width;
            });
        });

放到脚本的顶部，但是imgWidth在(document).ready中被声明为未定义。

编辑2:所以，这实际上很有效。这是新的代码，它是100%的功能。新的画布尺寸正是我想要的，基于图像尺寸和它的全部工作…我唯一在想的是，可能嵌套函数太多了，但我会试着自己解决。

<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="1100" height="500">
        </canvas>
    <script>
        $(document).ready(
                function() {
                    $("<img>").attr("src", "test1image.jpg").on('load', function() {
                        var imgWidth, imgHeight;
                        var imageData; 
                        var image = new Image();
                        var canvas = document.getElementById("myCanvas");
                        var ctx = canvas.getContext("2d");
                        ctx.canvas.width = this.width * 2;
                        ctx.canvas.height = this.height; 
                        $(image).on("load", function() {
                            /* This is where the image is loaded and 
                               inserted into the canvas */
                            ctx.drawImage(image, 0, 0);
                        });
                        image.src = "test1image.jpg"; 
                        imageData = ctx.getImageData(0, 0,
                                this.width,
                                this.height);
                        /* This is just part of the image manipulation, 
                           bland right now */
                        var newImgData = ctx.createImageData(imageData.width,
                                imageData.height);
                        for ( var i = 0; i < newImgData.data.length; i += 4) {
                            newImgData.data[i + 0] = 255;
                            newImgData.data[i + 1] = 0; 
                            newImgData.data[i + 2] = 0; 
                            newImgData.data[i + 3] = 255;       
                        }
                        ctx.putImageData(newImgData, imageData.width, 0);
                 });
                });
    </script>
</body>
</html>

此语法:.load()已弃用，请使用.on('load'...代替。此外，这不会延迟.ready中函数的执行。是否有一个原因，你不能做简单的，愚蠢的事情，只是把回调函数内部的.on('load', handler)处理程序代替?

$(document).ready(function() {
         $("<img>").attr("src", "test1image.jpg").on('load', function() {
                // do stuff with dimensions
                var imgWidth, imgHeight;
                var imageData; 
                // ... etc.
         });
});

您试图将同步序列硬塞到异步模型上，基本上您只是不想这样做。

文档准备事件假定在加载其他资产之前触发:http://api.jquery.com/ready/-注意它提到的正是您正在询问的情况。

如果代码依赖于加载的资产(例如，如果需要图像的尺寸)，则应该将代码放置在load事件的处理程序中。

所以你应该能够改变你的代码使用document.load()而不是document.ready()，但这将等待，直到所有资产加载。如果您只想等待特定的图像加载，您应该将代码从document.ready移动到图像的load事件。编辑:

您的新代码基本上执行最后一个选项-将代码移动到图像的加载事件中，这可能是最好的，因为它允许您的代码在特定图像准备好时立即运行。在加载JS库等之前，你可以在内联脚本中预加载图像，这样可以让图像与其他资源并行下载，而不是等待文档准备事件开始加载图像。

相关内容

最新更新

热门标签：