Question

I don’t know why but my script is returning the wrong value for alpha channel.

This is what i have:

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);

}

My console output shows:

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

Here is also the image I am testing it with :

Can anyone see any glaring mistake that might explain why the alpha never equals 0 ?

JSFiddle testing location x1 and y1:
http://jsfiddle.net/darkyen/UCSU2/15/

Answer 1

Well as per specs the .getImageData(); returns an imagedata object. In that object there is an array data which has all your data.

You were missing the data , so basically since d is the imagedata element there for it has not element defined for index 3 => d[3] === undefined,

hence it was failing ,

try d[3].data

http://jsfiddle.net/UCSU2/16/ <- here is a working fiddle