在非透明像素上点击检测

Question

给定一个带有透明像素和一些非透明像素的Web上下文中的PNG,Javascript中是否有一种方法可以确定用户是否点击了非透明像素？仅限webkit的解决方案是完全可以接受的.

Answer 1

1)创建与图像大小相同的HTML5画布
2)获取画布的上下文,drawImage(yourImage,0,0)
3)d = context.getImageData(img的0,0,w,
im的im )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

Answer 2

我知道这些东西现在已经过时了,但是HTML图像映射仍然有效,并且可以完成将命中目标添加到图像中的几乎任意形状.如果您实际上不想在单击时重新加载另一个页面,则可以使用此技术更改URL中的锚点,并使用Javascript间隔选择更改.