2015-11-29 68 views
1

我正在運行下面的代碼,每次觸發時都會返回四個值。getImageData爲1個像素返回4個值

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個值當我點擊圖像的blaxk一部分?

它返回0,255,255,255

+1

這看起來很像RGBA值 –

回答

2

對於在的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

+1

...和R1 + G1的重要性+ B1 + A1,R2 + G2 + B2 + A2幅面的是,數據可以很,非常迅速地複製到GPU(或顯示或其他畫布)。這種格式是使畫布如此惡作劇的原因! :-) – markE