getImageData returns 1 个像素的 4 个值

Question

我是运行下面的代码，每次它触发它 return 四个值。

var imgd = ctx.getImageData(2, 2, 1,1);
var pix = imgd.data;
console.log(pix);
for (var i = 0; n = pix.length, i < n; i += 4) {
    if (pix[i] == 0) {
        alert(i);
    }
}

我正在发送位置 x = 2 和 y = 2 的数据。宽度和高度各 = 1 个像素。

我希望 returned 的值是单个值。为什么当我单击图像的黑色部分时，控制台中显示 return 4 个值？

它 returns 0, 255, 255, 255

Answer 1

For each pixel in an ImageData object there's four pieces of information, the RGBA values:
R - The color red (from 0-255)
G - The color green (from 0-255)
B - The color blue (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.

来源： http://www.w3schools.com/tags/canvas_getimagedata.asp

If you'd like to convert RGB to Hex values: (255,255,255 to #ffffff)

var imgd = ctx.getImageData(2, 2, 1,1);
var pix = imgd.data;
console.log(pix);
for (var i = 0; n = pix.length, i < n; i += 4) {
    var red = pix[i];
    var green = pix[i+1];
    var blue = pix[i+2];
    var alpha = pix[i+3];
    var color = rgb2hex(red,green,blue);
    console.log("color: "+color);
}
function rgb2hex(red, green, blue) {
    var rgb = blue | (green << 8) | (red << 16);
    return '#' + (0x1000000 + rgb).toString(16).slice(1)
}

示例：JS Bin

另一个很好的资源：HTML5 Canvas Image Data Tutorial

getImageData returns 1 个像素的 4 个值

getImageData returns 4 values for 1 pixel

html

javascript

canvas

html5-canvas