getImageData在alpha通道上无法正常工作

Question

我不知道为什么但是我的脚本为alpha通道返回了错误的值。

这就是我所拥有的：

function getPixel(x,y,px,py,i){

//user click: x y 
//picture location: px py 
//array key:  i

//location of click has to be changed to be relevant to this temp canvas
//as image will now be at position 0,0
var x = Math.round(0 - (px - x) );
var y = Math.round(0 - (py - y) );  

//temp canvas 
var c = document.createElement('canvas');   
var context = c.getContext('2d');   
c.width = pArray[i].img.width;
c.height = pArray[i].img.height;


context.drawImage(pArray[i].img,0,0);

var d = context.getImageData(x,y,1,1);
if(d[3] != 0){
    console.log('Not Alpha'); //always happens
} else {
    console.log('Alpha'); // never happens
}

console.log(x + ', ' + y + ', ' + c.width + ', ' + c.height + ', ' + pArray[i].img.src);

}

我的控制台输出显示：

8, 42, 128, 128, [Full URL Hidden]/images/1.png 

以下是我正在测试它的图像：

任何人都可以看到任何可以解释为什么alpha永远不等于0的明显错误吗？

JSFiddle测试位置x1和y1： http://jsfiddle.net/darkyen/UCSU2/15/

Answer 1

context.getImageData（）返回ImageData（参见this page），而不是Pixel Array。 所以改变行

var d = context.getImageData(x,y,1,1);

到

var d = context.getImageData(x,y,1,1).data;

将完成这项工作。

Canvas ImageData参考：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata

像素操作参考：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation

MDN ImageData参考（尚未完成）：https://developer.mozilla.org/en-US/docs/DOM/ImageData

Answer 2

根据规格，.getImageData（）;返回imagedata个对象。在该对象中，有一个包含所有数据的数组数据。

你错过了数据，所以基本上因为d是imagedata元素，因为它没有为索引3定义的元素=＆gt; d [3] === undefined，

因此失败了，

尝试d[3].data

http://jsfiddle.net/UCSU2/16/＆lt; - 这是一个工作小提琴