在循环中调用图像会创建重叠的变量

Calling images in loop creates overlapping variables

本文关键字：创建 重叠 变量 图像 循环 调用      更新时间：2023-09-26

我试图在加载页面时将一个函数应用于页面上的每个图像。我的image.onload函数中的变量似乎是全局的，这会导致图像被跳过和意外的效果（例如图像不符合应用的widths）。

这是我的全部JS:

var imgList = document.getElementsByTagName('img');
$('img').after('<canvas></canvas>');
for (var j = 0; j < imgList.length; j++){
    var image = document.getElementsByTagName('img')[j];
    var canvas = document.getElementsByTagName('canvas')[j];
    image.onload = function(){
        console.log(canvas);
        var ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var pixelNum = imgData.data.length;
        //initialize brightness for levels
        var redMax = 0; 
        var redMin = 255;
        var greenMax = 0; 
        var greenMin = 255;
        var blueMax = 0; 
        var blueMin = 255;
        for(var i = 0; i < pixelNum; i += 4){
            //set min and max values for each color
            if (imgData.data[i] > redMax) { redMax = imgData.data[i] };
            if (imgData.data[i] < redMin) { redMin = imgData.data[i] };
            if (imgData.data[i+1] > greenMax) { greenMax = imgData.data[i+1] };
            if (imgData.data[i+1] < greenMin) { greenMin = imgData.data[i+1] };
            if (imgData.data[i+2] > blueMax) { blueMax = imgData.data[i+2] };
            if (imgData.data[i+2] < blueMin) { blueMin = imgData.data[i+2] };
        }
        console.log(redMin+" "+redMax+" "+blueMin+" "+blueMax+" "+greenMin+" "+greenMax);
        for(var i = 0; i < pixelNum; i += 4){
            //map colors to 0 - 255 range
            imgData.data[i] = (imgData.data[i] - redMin) * (255 / (redMax - redMin));
            imgData.data[i+1] = (imgData.data[i+1] - greenMin) * (255 / (greenMax - greenMin));
            imgData.data[i+2] = (imgData.data[i+2] - blueMin) * (255 / (blueMax - blueMin));
        }
        ctx.putImageData(imgData, 0, 0);
        //remove original img tag
        $(image).remove();
        console.log(image);
     };
};

这是我的控制台输出（下面有评论）：

<canvas> (line 20)
0 0 0 0 0 0 (line 47)
<img src="images/cimg1836.jpg"> (line 59)
<canvas width="400" height="268"> (line 20)
29 255 18 255 23 255 (line 47)
<img src="images/cimg1836.jpg"> (line 59)

-画布标记按预期添加。-亮度max和min不应该都为零，因为min被设置为255，max被设置为0（图像被读取为全黑像素）。-列出的图像是标记中的两个图像中的第二个。

-第一个canvas标记被输出到控制台–第二个canvas忽略img{ width:400px; }样式，该样式应该从img继承。-正如预期的那样。-正如预期的那样。

我如何保持图像的不同，也就是说，让它们运行所有代码，并且只运行一次？

JavaScript没有块作用域，所以循环中的那些变量实际上是"全局"的。

我会将整个循环体移动到一个以j为参数的函数中。通过这样做，image和canvas对于每个单独的函数调用的作用域都是唯一的，因此不会"重叠"并导致您所看到的效果。

function doMyThing(image_n) {
   var image    = document.getElementsByTagName('img')[image_n];
   var canvas   = document.getElementsByTagName('canvas')[image_n];
   image.onload = function() { /* ... */ };
}
for (var j = 0; j < imgList.length; j++) {
   doMyThing(j);
}

对这种技巧的需求（也就是说，在你不一定凭直觉就能理解的地方引入函数范围）是JavaScript的一个特点，当你继续用这种语言编程时，你应该把它记在心里。

相关文章：