Con la etiqueta canvas, puede determinar el valor de color de un píxel en un punto determinado. Puede usar los datos del evento para determinar las coordenadas, luego verifique la transparencia. Todo lo que queda es cargar la imagen en un lienzo.
En primer lugar, nos ocuparemos de que:
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = [YOUR_URL_HERE];
Este primer bit agarra el elemento canvas, a continuación, crea un objeto Image. Cuando la imagen se carga, se dibuja en el lienzo. ¡Muy claro! Excepto ... si la imagen no está en el mismo dominio que el código, te enfrentas a la seguridad de política del mismo dominio. Para obtener los datos de nuestra imagen, necesitaremos que la imagen se aloje localmente. También puede base64 codificar su imagen, que está más allá del alcance de esta respuesta. (ver this url para que una herramienta lo haga).
A continuación, adjunte su evento de clic al lienzo. Cuando esto viene en clic, comprobaremos la transparencia y actuar sólo a ciertas regiones clic no transparentes:
if (isTransparentUnderMouse(this, e))
return;
// do whatever you need to do
alert('will do something!');
La magia sucede en la función isTransparentUnderMouse, que necesita dos argumentos: el elemento canvas de destino (en el this haga clic en el alcance del manejador) y los datos del evento (e, en este ejemplo). Ahora llegamos a la carne:
var isTransparentUnderMouse = function (target, evnt) {
var l = 0, t = 0;
if (target.offsetParent) {
var ele = target;
do {
l += ele.offsetLeft;
t += ele.offsetTop;
} while (ele = ele.offsetParent);
}
var x = evnt.page.x - l;
var y = evnt.page.y - t;
var imgdata = target.getContext('2d').getImageData(x, y, 1, 1).data;
if (
imgdata[0] == 0 &&
imgdata[1] == 0 &&
imgdata[2] == 0 &&
imgdata[3] == 0
){
return true;
}
return false;
};
En primer lugar, hacemos un poco de baile en torno a obtener la posición exacta del elemento en cuestión. Vamos a usar esa información para pasar al elemento canvas. El getImageData nos dará, entre otras cosas, un objeto data que contiene el RGBA de la ubicación que hemos especificado.
Si todos esos valores son 0, entonces estamos viendo la transparencia. Si no, hay un poco de color presente. -edit- como se menciona en los comentarios, el único valor que realmente necesitamos ver es el último, imgdata[3] en el ejemplo anterior. Los valores son r (0) g (1) b (2) a (3) y la transparencia está determinada por a, alfa. Puede usar este mismo enfoque para encontrar cualquier color con cualquier opacidad para la que conozca los datos de rgba.
Pruébalo aquí: http://jsfiddle.net/pJ3MD/1/
(nota: en mi ejemplo, he usado una imagen codificada en base64 debido a la seguridad del dominio que he mencionado Puede pasar por alto esa parte del código, a menos que también tiene la intención. sobre el uso de la codificación base64)
mismo ejemplo, con cambios en el cursor del ratón tirado en una diversión: http://jsfiddle.net/pJ3MD/2/
Documentación
¿Necesita hacer esto porque las imágenes se generarán dinámicamente? Aunque estoy seguro de que podría hacerse en JavaScript, probablemente sea lento. Después de haber usado la "varita mágica" y otras cosas en Photoshop, tampoco es trivial "hacerlo bien". Parece que si está generando imágenes dinámicamente, use los datos de origen para crear un mapa de imágenes. Si no lo eres, ¿por qué no hacerlo sin conexión y usar un mapa de imagen? –
Sí, eso va a ser dinámico, ya que las imágenes también se cargarán dinámicamente ... – lviggiani