0
398
Vistas¿Cómo obtener los valores de píxeles RGB usando JavaScript?
Tengo una imagen .png con 500 píxeles de ancho y 400 píxeles de alto. También tengo un lienzo que tiene las mismas dimensiones (500x400).
Quiero obtener el valor RGB de un píxel, le da las coordenadas x e y. Por ejemplo:
Proporcione el píxel en las coordenadas x = 0 e y = 0 (esquina superior izquierda) en el lienzo/imagen, luego imprima:
R: 255, G: 200, B: 30
HTML:
<canvas id="myCanvas" width="500" height=400" style="bprder:1px, solid, #000000"> Your browser does not support the HTML5 canvas tag</canvas> <p id="pixelValues"></p>Quiero imprimir el valor RGB en un archivo HTML, por lo que el JS para imprimir esto debería ser algo como esto:
document.getElementById("pixelValues").innerHTML =//the variable that has the RGB values of the pixel at coordinates xy.Traté de usar el método getImageData pero no funciona :/
Espero que esta imagen aclare el problema:
EDITAR: Mi problema no tenía nada que ver con mi código. Luego noté que la consola estaba dando error de CORS, así que resolví el problema cambiando el src de la imagen a un enlace donde CORS estaba habilitado.
1 Respuestas
Responde la pregunta0
getImageData debería estar bien,
A continuación se muestra un ejemplo, mueva el mouse sobre la imagen y le mostrará los valores r, g, b debajo del cursor del mouse.
const c = document.querySelector('canvas'); const ctx = c.getContext('2d'); const i = new Image(); i.src = 'https://picsum.photos/200/300'; i.crossOrigin = "Anonymous"; i.onload = () => { ctx.drawImage(i, 0,0); } const cc = document.querySelectorAll('.rgb'); const picked = document.querySelector('#picked'); c.addEventListener('mousemove', (e) => { const pixel = ctx.getImageData(e.clientX,e.clientY,1,1); const r = pixel.data[0]; const g = pixel.data[1]; const b = pixel.data[2]; cc[0].innerText = r; cc[1].innerText = g; cc[2].innerText = b; picked.style.backgroundColor = `rgb(${r},${g},${b})`; console.log(picked.style); }); <div style="display:grid;grid-template-columns: 1fr 1fr; gap: 1em"> <canvas width="200" height="300"></canvas> <div> <div>red: <span class="rgb"></span></div> <div>green: <span class="rgb"></span></div> <div>blue: <span class="rgb"></span></div> <div id="picked" style="height: 20px"></div> </div> </div>