¿Cómo obtener el color de coordenada x, y de un píxel de una imagen?

Question

¿Hay alguna manera de verificar si un punto seleccionado (x, y) de una imagen PNG es transparente?

Answer 1

Basándose en la respuesta de Jeff, su primer paso sería crear una representación en lienzo de su PNG. A continuación, crea un lienzo fuera de 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 hace clic, y utilizan event.offsetXevent.offsetY para obtener la posición. Esto puede ser utilizado para adquirir el píxel:

var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data; 

Debido a que sólo están agarrando un píxel, pixelData es una matriz de cuatro entrada que contenga R del píxel, G, B, y los valores de a. Para alfa, cualquier cantidad 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/ Utilicé jQuery por comodidad en todo esto, pero de ninguna manera es obligatorio.

Nota:getImageData cae bajo política del mismo origen del navegador para prevenir fugas de datos, lo que significa que esta técnica se producirá un error si se ensucian la lona con una imagen de otro dominio o (creo, pero algunos navegadores pueden haber resuelto este) SVG desde cualquier dominio. Esto protege contra los casos en que un sitio sirve un elemento de imagen personalizado para un usuario conectado y un atacante desea leer la imagen para obtener información. Puede resolver el problema sirviendo la imagen desde el mismo servidor o implementando Cross-origin resource sharing.

Answer 2

El lienzo sería una excelente manera de hacerlo, como @pst dijo anteriormente. Echa un vistazo a esta respuesta para un buen ejemplo:

getPixel from HTML Canvas?

un código que serviría que específicamente así:

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 había necesidad de convertir ese en una x, y y convertir el bucle for a una verificación directa o ejecutar un interior condicional.

Al volver a leer su pregunta, parece que desea obtener el punto en el que la persona hace clic. Esto se puede hacer bastante fácilmente con el evento de clic de jquery. Simplemente ejecute el código anterior dentro de un manejador de clics como tal:

$('el').click(function(e){ 
    console.log(e.clientX, e.clientY) 
} 

Deben capturar sus valores x e y.

Answer 3

Las dos respuestas anteriores demuestran cómo usar Canvas y ImageData. Me gustaría proponer una respuesta con un ejemplo ejecutable y el uso de un marco de procesamiento de imágenes, por lo que no es necesario manejar los datos de píxeles manualmente.

MarvinJ proporciona el método image.getAlphaComponent (x, y) que simplemente devuelve el valor de transparencia para el píxel en coordenadas x, y. Si este valor es 0, el píxel es totalmente transparente, los valores entre 1 y 254 son niveles de transparencia, finalmente 255 es opaco.

Para demostrar que he usado la imagen (300x300) con fondo transparente y dos píxeles a coordenadas (0,0) y(150,150). salida

Console:

(0,0): TRANSPARENTE
(150,150): NOT_TRANSPARENT

var canvas = document.getElementById("canvas"); 
 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); 
 

 
function imageLoaded(){ 
 
    console.log("(0,0): "+(image.getAlphaComponent(0,0) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
    console.log("(150,150): "+(image.getAlphaComponent(150,150) > 0 ? "NOT_TRANSPARENT" : "TRANSPARENT")); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas" width="500" height="344"></canvas>