Identify certain colors using getImageData

Question

I'm not sure how to properly use getImageData for color recognition.

var imgd = ctx.getImageData(checkx - ln, checky - ln, ln * 2, ln * 2);
pix = imgd.data;

for (var i = 0, n = pix.length; i < n; i += 4){
    if (pix[i] != 255) {
        collision = 1;
    }
}

Right now, to be safe - if something isn't white on the canvas -> collision

But I want to identify red #ff0000 or green colors #00CC00

How can I do it?

Why do you think that code would recognize white? It does set `collision` to `1` only when the *red* intensity is not `255`. — Bergi, Aug 14 '13 at 14:40
Why are you performing an assignment in the conditional of the loop? — Craig, Aug 14 '13 at 14:42
I need a way to recognize certain colors on the canvas and I have no idea how to do it — Dany D, Aug 14 '13 at 14:48
I don't know what you are getting in each pix[] entity, but white would be 16777215 surely? As opposed to 255. 255 represents only a single plane. http://en.wikipedia.org/wiki/HSL_and_HSV — Craig, Aug 14 '13 at 14:49
Just read something interesting here: http://stackoverflow.com/questions/667045/getpixel-from-html-canvas — Dany D, Aug 14 '13 at 14:59
@Bergi - The question was modified by myself and one other to correct the conditional. That's why it is now correct. — Craig, Aug 14 '13 at 15:52

Craig · Answer 1 · 2013-08-15T07:32:56.390

I really am unfamiliar with the API, so this is a long shot. If my assumption that pix[n] represents a single pixel RGB value, then this will tell you if there is any red in the pixel:

if (0xff0000 & pix[i]) {
    gotSomeRed = true;
}

Update: If that is the case, then a collision will also be:

if (0xffffff & pix[i]) {
    gotACollision = true;
}

Update 2:

Apparently, the API says:

red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];

So you can achieve what I outlined by either:

if (pix[0] & 0xff) {
    gotSomeRed = true;
}
if (((pix[0] << 16) | (pix[1] << 8) | pix[2]) === 0xffffff) {
    gotAWhitePixel = true;
}

Or simply:

if (pix[0] > 0) {
    gotSomeRed = true;
}
if ((pix[0] + pix[1] + pix[2]) === 0xffffff) {
    gotAWhitePixel = true;
}

I won't downvote, but please make yourself familiar with [the API](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) and then either update or delete your answer :-) — Bergi, Aug 14 '13 at 15:46

score 0 · Accepted Answer · answered Aug 14 '13 at 15:27

To begin with, you need an image loaded on the canvas. You may try my fiddle on loading images for more information.

Once an image is loaded onto the canvas, the pixel level information of the loaded image can be obtained using the data method of ImageData object.

Before that, the ImageData object must be generated from the canvas. First statement of the script

var imgd = ctx.getImageData(checkx - ln, checky - ln, ln * 2, ln * 2);

does just that.

Second statement in the script,

pix = imgd.data;

retrieves pixel level details of the image loaded into the canvas as Unit8ClampedArray

The variable pix can be treated as any ordinary array. For example

for(var nPix = 0; nPix < pix.length; nPix++) {
  //Some pixel manipulation on the image
}

Hope this inspired some ideas.

Identify certain colors using getImageData

2 Answers2