Question

我尝试将一个函数应用于页面上的每个图像，因为它已加载。我的image.onload函数中的变量似乎是全局的，这会导致图像被跳过并产生意外效果（例如图像不尊重应用width）。

这是我的整个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（图像被读取为全黑像素）。 - 列出的图像是标记中两个图像中的第二个。

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

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

Answer 1

JavaScript没有块范围，因此循环中的那些变量确实是＆＃34; global＆＃34;。

我将整个循环体移动到以j为参数的函数中。通过这样做，image和canvas对于每个函数调用的范围将是唯一的，因此不会重叠＆＃34;并导致你已经看到的效果。

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

循环调用图像会产生重叠变量

1 个答案: