了解画布如何将图像转换为黑白

Understanding how canvas converts an image to black and white(了解画布如何将图像转换为黑白)

问题描述

我发现了这个用于将图像转换为黑白的脚本，效果很好，但我希望能更好地理解代码.我将我的问题以注释的形式放在代码中.

I found this script for converting an image to black and white, which works great, but I was hoping to understand the code a little bit better. I put my questions in the code, in the form of comments.

谁能更详细地解释一下这里发生了什么:

Can anyone explain in a little more detail what is happening here:

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();
}

推荐答案

1. canvas 函数与大多数函数一样，在 中进行了描述官方规范.此外，MDC 对更多非正式"文章很有帮助.例如.MDC 上的 drawImage 函数在 这里.

1. The canvas functions are, like most functions, described in an official specification. Also, MDC is helpful for more "informal" articles. E.g. the drawImage function on MDC is here.

getImageData 函数返回一个对象，该对象包含一个数组，其中包含所有像素的字节数据.每个像素由 4 个字节描述:r、g、b 和 a.

The getImageData function returns an object, which contains an array with the byte data of all pixels. Each pixel is described by 4 bytes: r, g, b and a.

r、g 和 b 是颜色分量(红色、绿色和蓝色)，alpha 是不透明度.所以每个像素使用 4 个字节，因此一个像素的数据从 pixel_index * 4 开始.

r, g and b are the color components (red, green and blue) and alpha is the opacity. So each pixel uses 4 bytes, and therefore a pixel's data begins at pixel_index * 4.

是的，它正在平均这些值.因为在接下来的 3 行中，r、g 和 b 都设置为相同的值，因此您将获得每个像素的灰色(因为这三种成分的量都是一样的).

Yes, it's averaging the values. Because in the next 3 lines r, g and b are all set to that same value, you'll obtain a gray color for each pixel (because the amount of all 3 components are the same).

所以基本上，对于所有像素，这将保持:r === g、g === b 以及 r === b.保持这种状态的颜色是灰度(0, 0, 0 为黑色，255, 255, 255 为白色).