¿Cómo comprobar si un píxel específico de una imagen es transparente?
¿Hay alguna forma de comprobar si un punto seleccionado (x,y) de una imagen PNG es transparente?
Basándose en la respuesta de Jeff, su primer paso sería crear una representación en lienzo de su PNG. Lo siguiente crea un lienzo fuera de la pantalla que tiene el mismo ancho y alto que su imagen y tiene la imagen dibujada en él.
var img = document.getElementById('my-image');
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
Después de eso, cuando un usuario haga clic, use event.offsetXy event.offsetYpara obtener la posición. Esto luego se puede utilizar para adquirir el píxel:
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
Debido a que solo está tomando un píxel, pixelData es una matriz de cuatro entradas que contiene los valores R, G, B y A del píxel. Para alfa, cualquier valor inferior a 255 representa algún nivel de transparencia, siendo 0 completamente transparente.
Aquí hay un ejemplo de jsFiddle: http://jsfiddle.net/thirtydot/9SEMf/869/ Usé jQuery por conveniencia en todo esto, pero de ninguna manera es necesario.
Nota: getImageData cae bajo la política del mismo origen del navegador para evitar fugas de datos, lo que significa que esta técnica fallará si ensucia el lienzo con una imagen de otro dominio o (creo, pero algunos navegadores pueden haber resuelto esto) SVG de cualquier dominio. Esto protege contra casos en los que un sitio ofrece un recurso de imagen personalizado para un usuario que ha iniciado sesión y un atacante quiere leer la imagen para obtener información. Puede resolver el problema sirviendo la imagen desde el mismo servidor o implementando el uso compartido de recursos entre orígenes .
Canvas sería una excelente manera de hacer esto, como dijo @pst anteriormente. Consulte esta respuesta para ver un buen ejemplo:
¿Obtener píxeles de HTML Canvas?
Algún código que también te serviría específicamente:
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
console.log pix[i+3]
}
Esto irá fila por fila, por lo que necesitarás convertirlo en x,y y convertir el bucle for en una verificación directa o ejecutar un condicional interno.
Al leer su pregunta nuevamente, parece que desea poder entender el punto en el que la persona hace clic. Esto se puede hacer con bastante facilidad con el evento click de jquery. Simplemente ejecute el código anterior dentro de un controlador de clic como tal:
$('el').click(function(e){
console.log(e.clientX, e.clientY)
}
Esos deberían tomar sus valores xey.
Sobre la base de la respuesta de Brian Nickel, solo el píxel deseado de la imagen de origen se dibuja en un lienzo de 1*1 píxeles, lo cual es más eficiente que dibujar la imagen completa solo para obtener un solo píxel:
function getPixel(img, x, y) {
let canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
canvas.getContext('2d').drawImage(img, x, y, 1, 1, 0, 0, 1, 1);;
let pixelData = canvas.getContext('2d').getImageData(0, 0, 1, 1).data;
return pixelData;
}
