javascript - Canvas:将图像转换为灰度

Question

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(>var y = 0; y < imgPixels.height; y++){
 for(>var x = 0; x < imgPixels.width; x++){
      var i = (y * 4) * imgPixels.width + x * 4;
      var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
      imgPixels.data[i] = avg;
      imgPixels.data[i + 1] = avg;
      imgPixels.data[i + 2] = avg;
 }
}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();

上面的代码是标准实现。 具体代码如下: var i = (y * 4) * imgPixels.width + x * 4; 我知道我们应该掌握每个像素并获取平均值，但我知道为什么要使用 (y * 4)* imgPixel.width + x * 4

我是一名来自中国的新生，希望能得到大家的帮助。如果您能帮助我，我将非常感激。谢谢!

Answer 1

图像由一维值数组表示。图像中的每个像素消耗数组中的 4 个连续条目。这四个值代表图像像素的红色、蓝色、绿色和 alpha(透明度) channel 。

该表达式将像素的(x, y)概念位置转换为线性数组中的点，在该点中可以找到与该位置相对应的四个值。 y 坐标给出了像素的行，因此 y 乘以图像宽度 - 图像的每一行消耗那么多像素。 x 坐标是该行的偏移量。每个值 y 和 x 都必须乘以 4 以考虑每个像素的四项表示。