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（透明度）通道。

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

画布：将图像转换为灰度

1 个答案: