Question

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

Answer 1

1）创建与图像大小相同的HTML5画布 2）获取Canvas的上下文，drawImage（yourImage，0,0）
3）d = context.getImageData（img的0,0，w，img的h）
4）对于alpha

，d.data [（y * width + x）* 4 + 3]

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 image maps仍然有效，并且可以在图像中为几乎任意形状添加命中目标。如果您实际上不想在点击时重新加载另一个页面，则可以使用此技术更改URL中的锚点，并使用Javascript间隔来获取更改。

Answer 3

Canvas是实现此目的的方法。但是请记住，较旧的Internet Explorer版本不具备getImageData()功能。即使你包括excanvas。

我为此目的制作了一个小的jquery插件，也许它可以帮助你解决问题，而无需完全重新发明轮子。 http://www.cw-internetdienste.de/pixelselection/

在非透明像素上点击检测

3 个答案: