0
673
ViewsHow 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 answers
Answer question0
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>