javascript - getImageData 在 Alpha channel 上无法正常工作

Question

我不知道为什么，但我的脚本返回了错误的 Alpha channel 值。

这就是我所拥有的:

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

根据规范，.getImageData();返回 imagedata目的。在该对象中有一个数组数据，其中包含您的所有数据。

您缺少数据，所以基本上因为 d 是其中的 imagedata 元素，因为它没有为索引 3 => d[3] === 定义元素定义，

因此失败了，

尝试d[3].data

http://jsfiddle.net/UCSU2/16/ <- 这是一个工作 fiddle