getImageData 为 1 个像素返回 4 个值

Question

我正在运行下面的代码，每次触发它都会返回四个值。

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 个像素。

我希望返回的值是单个值。为什么单击图像的空白部分时，控制台会返回 4 个值？

返回 0、255、255、255

Answer 1

对于 ImageData 对象中的每个像素，有 4 条信息，即 RGBA 值：
R - 红色（0-255）
G - 绿色（从 0-255）
B - 蓝色（从 0-255）
A - Alpha 通道（从 0 到 255；0 是透明的，255 是完全可见的）

颜色/alpha 信息保存在一个数组中，并存储在 ImageData 对象的 data 属性中。

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

如果您想将 RGB 转换为十六进制值：（255,255,255 到 #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