了解canvas如何将图像转换为黑白图像 [英] 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 都被设置为相同的值，你将获得每个像素的灰色（因为所有3个组件的数量是相同的）。

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 为白色） 。

So basically, for all pixels this will hold: r === g, g === b and thus also r === b. Colors for which this holds are grayscale (0, 0, 0 being black and 255, 255, 255 being white).

这篇关于了解canvas如何将图像转换为黑白图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！