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

Question

我正在尝试在页面加载时将函数应用于页面上的每个图像。我的 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)

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

- 第一个画布标签正在输出到控制台 - 第二个画布忽略 img{ width:400px; } 样式，它应该继承自 img。 - 正如预期的那样。 - 正如预期的那样。

我怎样才能让图像保持清晰，也就是说，让它们运行所有代码并且只运行一次？

Answer 1

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 的一个特性，当你继续用这种语言编程时，你应该把它放在脑海中。