Hit na nieprzejrzystym piksela

Question

Given PNG w kontekście internetowej z niektórych przezroczystych pikseli oraz niektórych nieprzezroczystych pikseli, czy istnieje sposób w javascript, aby ustalić, czy użytkownik kliknął nieprzezroczystej piksela? Rozwiązanie oparte wyłącznie na webkitach byłoby całkowicie dopuszczalne.

Answer 1

1) Utwórz HTML5 canvas o tej samej wielkości jak obrazie
2) Get kontekst płótno, w drawImage (yourImage, 0, 0)
3) d = context.getImageData (0, 0, w IMG, h img)
4) d.data [(r * szerokości + x) * 4 + 3] 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

znam te rzeczy są z mody tych dni, ale HTML image maps jest nadal ważna i może osiągnąć dodawanie trafionych celów do niemal arbitralnych kształtów w obrazie. Jeśli nie chcesz, aby przeładować faktycznie kolejną stronę na kliknięcie, prawdopodobnie można zmienić zakotwiczenie w URL z tej techniki i podnieść zmianę z przedziału Javascript.

Answer 3

Płótno jest drogą do tego celu. Pamiętaj jednak, że starsze wersje przeglądarek internetowych nie będą mogły korzystać z funkcji getImageData(). Nawet jeśli dołączasz excanvas.

zrobiłem mały jquery plugin dokładnie do tego celu, może to pomoże rozwiązać problem bez całkowicie wyważać otwartych drzwi. http://www.cw-internetdienste.de/pixelselection/