[英]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();
}
The canvas functions are, like most functions, described in an official specification . 与大多数函数一样,canvas函数在官方规范中有描述。 Also, MDC is helpful for more "informal" articles.
此外, MDC有助于更多“非正式”文章。 Eg the
drawImage
function on MDC is here . 例如,MDC上的
drawImage
函数就在这里 。
The getImageData
function returns an object, which contains an array with the byte data of all pixels. getImageData
函数返回一个对象,该对象包含一个包含所有像素字节数据的数组。 Each pixel is described by 4 bytes: r
, g
, b
and a
. 每个像素由4个字节描述:
r
, g
, b
和a
。
r
, g
and b
are the color components (red, green and blue) and alpha is the opacity. r
, g
和b
是颜色成分(红色,绿色和蓝色),alpha是不透明度。 So each pixel uses 4 bytes, and therefore a pixel's data begins at pixel_index * 4
. 因此每个像素使用4个字节,因此像素的数据从
pixel_index * 4
开始。
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). 因为在接下来的3行中,
r
, g
和b
都被设置为相同的值,所以您将获得每个像素的灰色(因为所有3个组件的数量都相同)。
So basically, for all pixels this will hold: r === g
, g === b
and thus also r === b
. 所以基本上,对于所有像素,这将保持:
r === g
, g === b
,因此r === b
。 Colors for which this holds are grayscale ( 0, 0, 0
being black and 255, 255, 255
being white). 其所持有的颜色为灰度(
0, 0, 0
为黑色255, 255, 255
为白色)。
function grayscale(src){ //Creates a canvas element with a grayscale version of the color image
//create canvas
var canvas = document.createElement('canvas');
//get its context
var ctx = canvas.getContext('2d');
//create empty image
var imgObj = new Image();
//start to load image from src url
imgObj.src = src;
//resize canvas up to size image size
canvas.width = imgObj.width;
canvas.height = imgObj.height;
//draw image on canvas, full canvas API is described here http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
ctx.drawImage(imgObj, 0, 0);
//get array of image pixels
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
//run through all the pixels
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
//here is x and y are multiplied by 4 because every pixel is four bytes: red, green, blue, alpha
var i = (y * 4) * imgPixels.width + x * 4; //Why is this multiplied by 4?
//compute average value for colors, this will convert it to bw
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
//set values to array
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
//draw pixels according to computed colors
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
In this function coefficient equal to 1/3 are used, however the usually used are: 0.3R + 0.59G + 0.11B (http://gimp-savvy.com/BOOK/index.html?node54.html). 在此函数中使用等于1/3的系数,但通常使用的是:0.3R + 0.59G + 0.11B(http://gimp-savvy.com/BOOK/index.html?node54.html)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.