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

我希望返回的值是单个值。当我单击图像的blaxk部分时，为什么它在控制台中返回4个值？

返回0,255,255,255

Answer 1

对于ImageData对象中的每个像素，有四条信息，即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

getImageData返回1个像素的4个值

1 个答案: