Come ottenere il colore di coordinate x, y di un pixel da un'immagine?

Question

C'è un modo per verificare se un punto (x, y) selezionato di un'immagine PNG è trasparente?

Answer 1

Sulla base della risposta di Jeff, il primo passo sarebbe creare una rappresentazione su tela del PNG. Quanto segue crea una tela fuori schermo che ha la stessa larghezza e altezza dell'immagine e ha l'immagine disegnata su di essa.

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); 

Dopo di che, quando un utente fa clic, usano event.offsetX e event.offsetY per ottenere la posizione. Questo può quindi essere utilizzato per acquisire il pixel:

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

Poiché sei solo afferrando un pixel, pixelData è un array di quattro voce contenente R del pixel, G, B, e valori A. Per alfa, qualsiasi valore inferiore a 255 rappresenta un livello di trasparenza con 0 completamente trasparente.

Ecco un esempio jsFiddle: http://jsfiddle.net/thirtydot/9SEMf/869/ Ho usato jQuery per comodità in tutto questo, ma non è affatto necessario.

Nota:getImageData cadute sotto criterio dell'origine del browser per evitare perdite di dati, il che significa questa tecnica avrà esito negativo se si sporca la tela con l'immagine di un altro dominio o (credo, ma alcuni browser potrebbero aver risolto questo) SVG da qualsiasi dominio. Questo protegge contro i casi in cui un sito serve una risorsa immagine personalizzata per un utente che ha effettuato l'accesso e un utente malintenzionato vuole leggere l'immagine per ottenere informazioni. È possibile risolvere il problema servendo l'immagine dallo stesso server o implementando Cross-origin resource sharing.

Answer 2

La tela sarebbe un ottimo modo per fare ciò, come @pst ha detto sopra. Check out questa risposta per un buon esempio:

getPixel from HTML Canvas?

Alcuni codice che servirà specificamente così:

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] 
} 

questo andrà riga per riga, così avresti bisogno di convertire quel in una x, y e converti il ​​ciclo for in un controllo diretto o esegui un condizionale all'interno.

Leggendo nuovamente la domanda, sembra che si sia in grado di ottenere il punto su cui la persona fa clic. Questo può essere fatto abbastanza facilmente con l'evento click di jquery. Basta eseguire il codice sopra all'interno di un gestore di clic come tale:

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

Questi dovrebbero prendere i valori xey.

Answer 3

Le due risposte precedenti mostrano come utilizzare Canvas e ImageData. Vorrei proporre una risposta con un esempio eseguibile e utilizzare un framework di elaborazione delle immagini, quindi non è necessario gestire manualmente i dati dei pixel.

MarvinJ fornisce il metodo image.getAlphaComponent (x, y) che restituisce semplicemente il valore di trasparenza per il pixel in coordinate x, y. Se questo valore è 0, il pixel è totalmente trasparente, i valori compresi tra 1 e 254 sono livelli di trasparenza, infine 255 è opaco.

Per dimostrare ho usato l'immagine qui sotto (300x300) con sfondo trasparente e due pixel a coordinate (0,0) e(150.150). Uscita

Console:

(0,0): TRASPARENTE
(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>