Detección de aciertos en píxeles no transparentes

Question

Dado un PNG en un contexto web con algunos píxeles transparentes y algunos píxeles no transparentes, ¿hay forma en Javascript de determinar si un usuario ha hecho clic en un píxel no transparente? Una solución solo de webkit sería perfectamente aceptable.

Answer 1

1) Crear HTML5 lienzo del mismo tamaño que su imagen
2) Obtener el contexto de la lona, ​​drawImage (yourImage, 0, 0)
3) d = context.getImageData (0, 0, w de img, h de img)
4) d.data [(y * ancho + x) * 4 + 3] para el alfa

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

sé que estas cosas están fuera de moda en estos días, pero HTML image maps aún son válidos, y puede lograr agregar objetivos de golpe a formas casi arbitrarias dentro de una imagen. Si no desea volver a cargar otra página al hacer clic, probablemente podría cambiar el delimitador en la URL con esta técnica y elegir el cambio con un intervalo de Javascript.

Answer 3

El lienzo es el camino a seguir para este propósito. Pero también recuerde que las versiones anteriores de Internet Explorer no serán capaces de la función getImageData(). Incluso si incluye excanvas.

He hecho un pequeño plugin jquery exactamente para este propósito, tal vez te ayude a resolver tu problema sin reinventar completamente la rueda. http://www.cw-internetdienste.de/pixelselection/