How to get the RGB pixel values using JavaScript?

Question

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.

Your request is not clear do you want to copy and image pixel by pixle or do you want to get a pixle RGB and print it somewhere bases on corditates — Andam
– Andam, Commented Dec 8, 2021 at 17:20
@Andam I want to get a pixel RGB bases on coordinates and then print it as a text in the HTML file (specifically in the element with "pixelValues" id). It's just the value of 1 pixel at x-y coordinate. — Corvo
– Corvo, Commented Dec 8, 2021 at 17:24
Keith just wrote an answer it seems like its what you requested — Andam
– Andam, Commented Dec 8, 2021 at 17:29

Keith · Accepted Answer · 2021-12-08 17:28:12Z

6

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>

answered Dec 8, 2021 at 17:28

Keith

24.4k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Corvo Over a year ago

I'm writing this but is not working. What am I doing wrong? HTML:

<div>red: <span class="red"></span></div>     <div>green: <span class="green"></span></div>     <div>blue: <span class="blue"></span></div>

JS:

var imgData = ctx.getImageData(0,0,500,400) var pix = imgData.data;  document.getElementById("red").innerHTML = pix[0]; document.getElementById("green").innerHTML = pix[1]; document.getElementById("blue").innerHTML = pix[2];

This is given me (in the HTML page) the output "0" for all RGB values.

Keith Over a year ago

@Corvo Unfortunately from the info you have given it's hard to say. Are you maybe looking at the pixels before you have loaded an image into the canvas,.. You won't be able to read the pixel data until the onLoad event has fired. If you can create jsBin / snippet etc that can show your issue that would help..

Corvo Over a year ago

I checked one thousand times that the image load before looking at the pixels. I found out that my problem wasn't in my application, it was fine... The problem was in the CORS, my application was not taking the image from local folder nor some websites, but it works fine with imgur... I don't know yet what is CORS, but now my problem is solved and I will study about CORS later. Thanks for the support :)

Keith Over a year ago

@Corvo If your loading images from another domain you need to make sure you do -> image.crossOrigin = "Anonymous"; as in my example, or you will get a tainted canvas..

Corvo Over a year ago

Yup. I did it, but even so for some sites still doesn't work, even for the image in my local folder (in this case it didn't work because I hadn't created any server) and in other cases because of the external server should enable it for same origin requests.

Collectives™ on Stack Overflow

How to get the RGB pixel values using JavaScript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related