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

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

javascript html

如何在javascript中循环浏览图像以进行图像处理？,javascript,html,Javascript,Html,我想循环浏览一系列图像。对于每个图像，我试图将其显示在画布上，并从中提取一些信息——在本例中，它与宽度一样简单。问题是只显示最后一幅图像，并且宽度值始终未定义 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="100" height="100"><

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

<!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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var path=['images/people/img_1.jpg'、'images/people/img_2.jpg'、'images/people/img_3.jpg'；
变量宽度=新数组（3）；
processImages（）；
函数processImages（）{
功能显示（img，i）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
宽度[i]=最小宽度；
警报（“i=”+i）；
}
对于（变量i=0；i<3；i++）{
var img=新图像（）；
img.onload=（函数（x）{
返回函数（）{
显示（这个，x）；
}
})（i） )；
img.src=路径[i]；
}
对于（i=0；i<3；i++）{
文件。写入（“
图像”+i+”宽度为：“+width[i]）；
}
}

image.onload

被异步调用——当映像加载时，它触发一个将执行该函数的事件。因此，在调用

onload

函数之前，将执行

for

循环，并且当您试图写入文档时，

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]);
}

var-width={}；
对于（变量i=0；i<3；i++）{
setTimeout（函数（）{
宽度[i]=i*2；
}, 0);
}
对于（变量i=0；i<3；i++）{
原木（宽度[i]）；
}

由于超时函数未执行，因此每次都会输出

未定义的

代码运行后，您会看到最后一个图像，因为您每次都在画布中的同一位置写入。您可能希望延迟写入画布，或者将图像放置在其他位置，使其不会重叠，这取决于您打算执行的操作。

如果将图像附加到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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var路径=['head.png'、'body.png'、'car.png']；
变量宽度=新数组（3）；
var body=document.getElementsByTagName（'body'）[0]；
//保存加载的图像数
var总负载=0；
processImages（）；
函数processImages（）{
功能显示（img，i）{
canvas.width=img.clientWidth；
canvas.height=img.clientHeight；
ctx.drawImage（img，0,0）；
宽度[i]=img.clientWidth>100；
}
对于（变量i=0；i<3；i++）{
var img=新图像（）；
img.onload=（函数（x）{
返回函数（）{
//附加到html
身体。附肢儿童（本）；
//现在您有了可用的宽度
console.log（this.clientWidth）；
//你需要什么就做什么
显示（这个，x）；
//删除图像
body.removeChild（这个）；
//检查是否已加载所有图像
总计++
如果（总负载>=路径长度）{
onComplete（）；
}
}
})（i） )；
img.src=路径[i]；
}
函数onComplete（）{
对于（i=0；i<3；i++）{
文件。写入（“
图像”+i+”宽度为：“+width[i]）；
}
}
}

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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var path=['images/people/img_1.jpg'、'images/people/img_2.jpg'、'images/people/img_3.jpg'；
//变量宽度=新数组（3）；
processImages（）；
函数processImages（）{
功能显示（img，i）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
document.getElementById（“w”）.innerHTML+=“
图像”+i+”宽度为：“+img.width；
}
对于（变量i=0；i<3；i++）{
var img=新图像（）；
img.onload=（函数（x）{
返回函数（）{
显示（这个，x）；
}
})（i） )；
img.src=路径[i]；
}
}