Обнаружение попадания в непрозрачный пиксель

Question

Учитывая PNG в веб-контексте с некоторыми прозрачными пикселями и некоторыми непрозрачными пикселями, есть ли способ в Javascript, чтобы определить, нажал ли пользователь непрозрачный пиксель? Было бы вполне приемлемо решение только для webkit.

Answer 1

1) Создайте HTML5-холст того же размера, что и ваше изображение
2) Получить контекст холста, drawImage (yourImage, 0, 0)
3) d = context.getImageData (0, 0, w из img, h из img)
4) 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 все еще действительны и могут выполнять добавление целевых объектов попадания к почти произвольным формам в изображении. Если вы на самом деле не хотите перезагружать другую страницу при нажатии, вы, вероятно, могли бы изменить привязку в URL с помощью этого метода и получить изменение с интервалом Javascript.

Answer 3

Холст - это путь для этой цели. Но также помните, что старые версии Internet Explorer не поддерживают функцию getImageData(). Даже если вы включите excanvas.

Я специально создал для этого небольшой плагин jquery, возможно, он поможет вам решить вашу проблему, не изобретая колесо заново. http://www.cw -internetdienste.de / pixelselection /