4

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.

6
  • 1
    que has probado hasta ahora? has mirado los eventos onclick, en un canvas donde tengas la imagen cargada para ver que informacion te da?
    – Jakala
    Commented 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 Commented 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 Commented 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 Commented 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 ? Commented el 17 oct. 2018 a las 21:54

1 respuesta 1

8

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

11
  • 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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.