2

我不知道为什么，但我的脚本为 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/

4

2 回答 2

1

context.getImageData() 返回 ImageData（参见此页），而不是像素数组。所以换行

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

到

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

会做的工作。

画布 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

于 2012-12-14T06:39:36.333 回答
1

以及按照规范 .getImageData(); 返回一个图像数据对象。在该对象中有一个数组数据，其中包含您的所有数据。

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

因此它失败了，

尝试d[3].data

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

于 2012-12-14T06:40:55.867 回答