javascript - 非透明像素的命中检测

Question

给定网络上下文中的 PNG 具有一些透明像素和一些非透明像素，Javascript 中是否有一种方法可以确定用户是否单击了非透明像素？仅 webkit 的解决方案是完全可以接受的。

Answer 1

1) 创建与图像大小相同的 HTML5 Canvas
2) 获取Canvas的上下文，drawImage(yourImage, 0, 0)
3) d = context.getImageData(0, 0, w of img, h of img)
4) d.data[(y*width+x)*4+3] 用于 alpha

canvas = document.createElement("canvas");  //Create HTML5 canvas: supported in latest firefox/chrome/safari/konquerer.  Support in IE9
canvas.width = img.width;                   //Set width of your rendertarget
canvas.height = img.height;                 // \  height \   \     \
ctx = canvas.getContext("2d");              //Get the 2d context [the thing you draw on]
ctx.drawImage(img, 0, 0);                   //Draw the picture on it.
id = ctx.getImageData(0,0, img.width, img.height);  //Get the pixelData of image
//id.data[(y*width+x)*4+3] for the alpha value of pixel at x,y, 0->255