2

理由はわかりませんが、スクリプトがアルファ チャネルに対して間違った値を返しています。

これは私が持っているものです:

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;

仕事をします。

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

于 2012-12-14T06:39:36.333 に答える
1

仕様によると、.getImageData(); imagedataオブジェクトを返します。そのオブジェクトには、すべてのデータを含む配列データがあります。

データが欠落していたため、基本的に d はimagedata要素であるため、インデックス 3 => d[3] === 未定義の要素が定義されていないため、

したがって、それは失敗していました、

試すd[3].data

http://jsfiddle.net/UCSU2/16/ <- ここに作業フィドルがあります

于 2012-12-14T06:40:55.867 に答える