Necesito obtener el color de una imagen en una coordenada exacta donde el usuario de click, necesito que esto pueda ser posible con imagenes de formato png, jpg o svg.
-
1que has probado hasta ahora? has mirado los eventos onclick, en un canvas donde tengas la imagen cargada para ver que informacion te da?– JakalaCommented el 17 oct. 2018 a las 15:54
-
Tienes que hacerlo cargando en un canvas (invisible) la imagen y calculando la posición del click sobre la misma– Pablo LozanoCommented el 17 oct. 2018 a las 16:04
-
hasta ahora, solo he logrado encontrar la coordenada en una imagen pero hasta alli estoy trabado codepen.io/KIDRP1/pen/pxaxbG?editors=1010– JcastillovnzCommented el 17 oct. 2018 a las 16:26
-
@PabloLozano dame un ejemplo por favor hasta ahora he logrado esto codepen.io/KIDRP1/pen/pxaxbG?editors=1010– JcastillovnzCommented el 17 oct. 2018 a las 16:47
-
@pabloLozano Che, hay alguna forma de obtener los colores en hexadecimal de una o tengo que convertilos de rgba a hex ?– JcastillovnzCommented el 17 oct. 2018 a las 21:54
|
Mostrar 1 comentario más
1 respuesta
He aquí lo que tienes que hacer:
- crear un canvas
- calcular las coordenadas relativas del click sobre la imagen
- obtener el pixel correspondiente del canvas
Te pongo un ejemplo:
const gatete= document.getElementById('gato');
const output= document.getElementById('output');
gatete.addEventListener('click', function (e) {
let ctx;
if(!this.canvas) {
this.canvas = document.createElement('canvas');
this.canvas.width = this.width;
this.canvas.height = this.height;
ctx=this.canvas.getContext('2d');
ctx.drawImage(this, 0, 0, this.width, this.height);
} else {
ctx=this.canvas.getContext('2d');
}
const pixel = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
output.innerHTML ='R: ' + pixel[0] + '<br>G: ' + pixel[1] +
'<br>B: ' + pixel[2] + '<br>A: ' + pixel[3];
});
img,pre {
display: inline-block;
}
<img id="gato" src="http://placekitten.com/300/200" crossorigin="anonymous">
<pre id="output"></pre>
Lo he hecho con puro JS, como puedes ver el código no es muy complicado una vez que se sabe lo que hay que lograr
-
Hola @pablo lozano tengo un problema con este codigo cuando uso imagenes locales el problema viene por el crossorigin="anonymous" como podria solucionar ese problema porque igual al quitar el atributo el javascript no me funciona Commented el 18 oct. 2018 a las 15:52
-
Define locales: ¿te refieres a que src es algo como
file:///C:...
? Commented el 18 oct. 2018 a las 15:55 -
<img width="800" id="imagen" src="img/masks.png" crossorigin="anonymous" > Commented el 18 oct. 2018 a las 15:57
-
la referencio de esa forma y no me muestra la imagen, y si quito el crosorigin me da error el javascript Commented el 18 oct. 2018 a las 15:57
-
¿Qué error te da? ¿Estás usando un servidor para las pruebas? Commented el 18 oct. 2018 a las 16:11