0

Estoy haciendo una página, y una de sus funcionalidades será de poder analizar una imagen, así que lo que necesito es poder saber el RGB de el área de una imagen, la imagen está contenida en un <canvas src="imagen.jpg"></canvas> actualmente he estado trabajando y pude obtener el área a analizar, me entrega los siguientes parámetros: -Coordenada X -Coordenada Y -Width -Height Sé que hay algo que se llama ImageData, pero he estado leyendo(la documentación de w3school y mozilla) y aún no logro entender como se usa, alguien me podría ayudar a realizarlo? Gracias

1 respuesta 1

1

canvas no tiene atributo src, tienes que poner la imagen dentro de un canvas y luego usar getImageData pasando como parámetro izquierda, arriba, ancho y alto. Luego tienes que hacer .data, los primeros tres elementos son el r, g b. Ejemplo:

JavaScript

const canvas = document.getElementById('canvas');
const img = document.getElementById('imagen');
const color = document.getElementById('color');
const ctxImagen = canvas.getContext('2d');

ctxImagen.drawImage(img, 0, 0, img.width, img.height);
//.getImageData(izquierda, arriba, ancho, alto);
var rgb = ctxImagen.getImageData(5, 5, 1, 1).data; //<-- un pixel en las coordenadas  5 y 5

console.log("red ", rgb[0]);
console.log("green ", rgb[1]);
console.log("blue ", rgb[2]);

color.style.backgroundColor = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;

HTML

<img id="imagen" class="pixelar" src="https://i.sstatic.net/rLuNu.jpg?s=48&g=1">
<canvas id="canvas"></canvas>
<div id="color" style="width: 100px; height: 100px;"></div>

No se puede poner el ejemplo vivo por el tema de CORS, pero algo así tiene que funcionar.

2
  • Hola, eso me funcionó, pero mira lo que sucede, estoy utilizando una librería que me retorna los valores de x,y,width,height de el área que yo seleccione, más sin embargo, esos valores yo se los paso a esta parte var rgb = ctxImagen.getImageData(variable_con_ejex,variable_con_ejey, variable_con_ancho, variable_con_largo).data; y descargué una imagen que solo tiene color rojo y azul y me retorna estos valores: red - 255 y el green y blue en 0, y el área que selecciono está agarrando el color rojo y azul
    – Jesús
    Commented el 2 nov. 2019 a las 1:56
  • El ancho y el largo de mi canvas son el mismo que de mi imagen
    – Jesús
    Commented el 2 nov. 2019 a las 2:02

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