javascript - 在循环中调用图像会产生重叠变量

Question

我试图在加载页面上的每个图像时对其应用一个函数。我的 image.onload 函数中的变量似乎是全局的，这会导致图像被跳过并产生意外效果(例如图像不尊重应用的宽度)。

这是我的整个 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 标签按预期添加。 - 亮度最大值和最小值不应同时为零，因为最小值设置为 255，最大值设置为 0(图像被读取为全黑像素)。 - 列出的图像是标记中两个图像中的第二个。

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

如何保持图像清晰，也就是说，让它们运行所有代码并且仅运行一次？

Answer 1

JavaScript 没有 block 作用域，因此循环中的这些变量确实是“全局”的。

我会将整个循环体移动到一个以 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);
}

对此类 hack 的需求(即，在您不一定能直觉到的地方引入函数作用域)是 JavaScript 的一个特性，当您继续使用这种语言进行编程时，您应该牢记这一点。