Hit su pixel non trasparenti

Question

Dato un PNG in un contesto web con alcuni pixel trasparenti e alcuni pixel non trasparenti, c'è un modo in Javascript per determinare se un utente ha fatto clic su un pixel non trasparente? Una soluzione per solo webkit sarebbe perfettamente accettabile.

Answer 1

1) Creare HTML5 canvas della stessa dimensione dell'immagine
2) Ottenere contesto di tela di canapa, drawImage (yourImage, 0, 0)
3) d = context.getImageData (0, 0, w di IMG, h di img)
4) [larghezza (y * + x) * 4 + 3] d.data per l'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

so che queste cose sono fuori moda questi giorni, ma HTML image maps sono ancora valide, e può realizzare l'aggiunta di bersagli colpiti a forme quasi arbitrarie all'interno di un'immagine. Se in realtà non si desidera ricaricare un'altra pagina al clic, è possibile modificare l'ancoraggio nell'URL con questa tecnica e raccogliere la modifica con un intervallo Javascript.

Answer 3

Canvas è la strada da percorrere per questo scopo. Ma ricorda anche che le versioni precedenti di Internet Explorer non saranno in grado di eseguire la funzione getImageData(). Anche se includi gli excanvas.

ho fatto un piccolo plugin jQuery esattamente per questo scopo, forse vi aiuterà a risolvere il tuo problema, senza reinventare completamente la ruota. http://www.cw-internetdienste.de/pixelselection/