0
683
VistasHow to get the RGB pixel values using JavaScript?
I have a .png image with 500 pixels of width and 400 pixel of height. I also have a canvas that has the same dimensions (500x400).
I want to get de RGB value of a pixel gives it x and y coordinates. For example:
Give the pixel at coordinate x = 0 and y = 0 (top-left corner) in canvas/image, then print:
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>
I want to print the RGB value in HTML file, so the JS to print this should be something like this:
document.getElementById("pixelValues").innerHTML =//the variable that has the RGB values of the pixel at coordinates x-y.
I tried to use getImageData method but doesn't work :/
I hope this image makes the issue clearer:
EDIT: My problem had nothing to do with my code. Afterwards I noticed that the console was giving CORS error, so I solved the problem by changing the src of the image to a link where CORS was enabled.
1 Respuestas
Responde la pregunta0
getImageData should be fine,
Below is an example, move your mouse over the image and it will show you the r,g,b values under the mouse cursor.
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>