Question

我想循环浏览一系列图片。对于每个图像，我试图在画布上显示它，并从中提取一些信息 - 在这个例子中，它就像它的宽度一样简单。问题是只显示最后一个图像，并且宽度值始终未定义。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>

<canvas id="canvas" width="100" height="100"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var paths = ['images/people/img_1.jpg', 'images/people/img_2.jpg', 'images/people/img_3.jpg'];
    var width = new Array(3);

    processImages();

    function processImages() {

        function display(img, i) {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            width[i] = img.width;
            alert("i = " + i);
        }

        for (var i = 0; i < 3; i++) {
            var img = new Image();

            img.onload = (function (x) {
                return function() {
                    display(this, x);
                }
            })(i);

            img.src = paths[i];
        }

        for (i = 0; i < 3; i++) {
            document.write("<br>Image " + i + " width is: " + width[i]);
        }
    }
</script>

</body>
</html>

Answer 1

异步调用

image.onload - 当图像加载时，它会触发将执行该函数的事件。因此，for循环将在onload函数被调用之前执行，width在您尝试写入文档时不会包含任何内容。

所以，让我说我有这个代码：

var width = {};
for(var i = 0; i < 3; i++){
    setTimeout(function(){
       width[i] = i * 2;
    }, 0);
}

for(var i = 0; i < 3; i++){
    console.log(width[i]);
}

由于超时功能未执行，每次都会输出undefined。

您会看到代码运行后的最后一个图像，因为您每次都会在画布中写入相同的位置。你可能想要延迟写入画布或将图像放在其他地方，这样它们就不会重叠，这取决于你打算做什么。

Answer 2

如果将图像附加到HTML，则可以获得宽度和高度。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>

<canvas id="canvas" width="100" height="100"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var paths = ['head.png', 'body.png', 'car.png'];
    var width = new Array(3);
    var body = document.getElementsByTagName('body')[0];

    // save number of images loaded
    var totalLoaded = 0;

    processImages();

    function processImages() {

        function display(img, i) {
            canvas.width = img.clientWidth;
            canvas.height = img.clientHeight;
            ctx.drawImage(img, 0, 0);
            width[i] = img.clientWidth > 100;
        }

        for (var i = 0; i < 3; i++) {
            var img = new Image();

            img.onload = (function (x) {


                return function() {
                    // append to the html
                    body.appendChild(this);

                    //  now you have the width available
                    console.log(this.clientWidth);

                    // do whatever you need
                    display(this, x);

                    // remove the image
                    body.removeChild(this);

                    // check if all of the images were loaded
                    totalLoaded++
                    if(totalLoaded >= paths.length) {
                        onComplete();
                    }
                }
            })(i);

            img.src = paths[i];
        }

        function onComplete () {
            for (i = 0; i < 3; i++) {
                document.write("<br>Image " + i + " width is: " + width[i]);
            }
        }
    }
</script>

</body>
</html>

Answer 3

document.write是非常非常古老的学校，并且只有几个非常特殊的情况应该使用它。尝试这样的事情：

<body>

<canvas id="canvas" width="100" height="100"></canvas>
<div id="w"></div>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var paths = ['images/people/img_1.jpg', 'images/people/img_2.jpg', 'images/people/img_3.jpg'];
    //var width = new Array(3);

    processImages();

    function processImages() {

        function display(img, i) {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            document.getElementById("w").innerHTML+="<br>Image " + i + " width is: " + img.width;
        }

        for (var i = 0; i < 3; i++) {
            var img = new Image();

            img.onload = (function (x) {
                return function() {
                    display(this, x);
                }
            })(i);

            img.src = paths[i];
        }

    }
</script>

</body>

如何在javascript中循环浏览图像以进行一些图像处理？

3 个答案: