Détection de hits sur un pixel non transparent

Question

Étant donné un PNG dans un contexte Web avec des pixels transparents et des pixels non transparents, existe-t-il un moyen de déterminer si un utilisateur a cliqué sur un pixel non transparent? Une solution webkit seulement serait parfaitement acceptable.

Answer 1

1) Créer toile HTML5 de même taille que votre image
2) Obtenez le contexte de toile, drawImage (yourImage, 0, 0)
3) d = context.getImageData (0, 0, w img, h de img)
4) d.data [(y * largeur + x) * 4 + 3] pour l'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

Je sais que ces choses sont hors de la mode ces jours-ci, mais HTML image maps sont toujours valables, et peut accomplir l'addition de cibles heurtées à des formes presque arbitraires dans une image. Si vous ne voulez pas réellement recharger une autre page sur le clic, vous pourriez probablement changer l'ancre dans l'URL avec cette technique et ramasser le changement avec un intervalle Javascript.

Answer 3

La toile est la voie à suivre à cet effet. Mais n'oubliez pas que les anciennes versions d'Internet Explorer ne seront pas capables de la fonction getImageData(). Même si vous incluez des excanvas.

J'ai fait un petit plugin jquery exactement à cet effet, peut-être qu'il vous aidera à résoudre votre problème sans réinventer complètement la roue. http://www.cw-internetdienste.de/pixelselection/