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
Añade un comentario
|
1 respuesta
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.
-
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úsCommented el 2 nov. 2019 a las 1:56
-
El ancho y el largo de mi canvas son el mismo que de mi imagen– JesúsCommented el 2 nov. 2019 a las 2:02