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

Ответ 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

Ответ 2

Я знаю, что эти вещи сегодня не в моде, но карты изображений HTML по-прежнему действительны и могут выполнять добавление целей хита почти - произвольные формы внутри изображения. Если вы на самом деле не хотите перезагружать другую страницу при щелчке, вы, вероятно, можете изменить привязку в URL-адресе с помощью этой техники и забрать изменение с интервалом Javascript.

Ответ 3

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

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