javascript - 了解 Canvas 如何将图像转换为黑白

我找到了这个将图像转换为黑白的脚本，效果很好，但我希望能更好地理解代码。我把我的问题以注释的形式写在代码中。

谁能更详细地解释一下这里发生的事情:

function grayscale(src){ //Creates a canvas element with a grayscale version of the color image
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0); //Are these CTX functions documented somewhere where I can see what parameters they require / what those parameters mean?
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
        for(var x = 0; x < imgPixels.width; x++){
            var i = (y * 4) * imgPixels.width + x * 4; //Why is this multiplied by 4?
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; //Is this getting the average of the values of each channel R G and B, and converting them to BW(?)
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}

最佳答案

与大多数函数一样， Canvas 函数在 an official specification 中进行了描述。此外，MDC 对更多“非正式”文章很有帮助。例如。 MDC 上的 drawImage 函数是 here 。

getImageData 函数返回一个对象，该对象包含一个数组，其中包含所有像素的字节数据。每个像素由 4 个字节描述: r 、 g 、 b 和 a 。
r 、 g 和 b 是颜色分量(红色、绿色和蓝色)， alpha 是不透明度。所以每个像素使用 4 个字节，因此一个像素的数据从 pixel_index * 4 开始。

是的，它是平均值。因为在接下来的 3 行 r 、 g 和 b 都设置为相同的值，您将获得每个像素的灰色(因为所有 3 个分量的数量相同)。

所以基本上，对于所有像素，这将成立: r === g ， g === b ，因此也是 r === b 。这适用于灰度的颜色(0, 0, 0 为黑色，255, 255, 255 为白色)。

关于javascript - 了解 Canvas 如何将图像转换为黑白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7502271/