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