Определить определенные цвета с помощью getImageData

Question

Я не уверен, как правильно использовать getImageData для распознавания цвета.

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; 
    } 
} 

Прямо сейчас, чтобы быть в безопасности - если что-то не белый на холсте -> коллизий

Но я хочу, чтобы определить красный #ff0000 или зеленые цвета #00CC00

Как я могу это сделать ?

Answer 1

Для начала, вам нужно изображение загружается на холсте. Вы можете попробовать my fiddle on loading images для получения дополнительной информации.

Как только изображение загружается на холст, информацию уровня пикселя загруженного изображения можно получить, используя метод data объекта ImageData.

Перед этим, объект ImageData должен быть сгенерирован с холста. Первый отчет по сценарию

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

делает именно это.

Второе утверждение в сценарии,

pix = imgd.data; 

извлекает данные уровня пикселя изображения загружены в холст, как Unit8ClampedArray

Переменная pix может рассматриваться как любой обычный массив. Например,

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

Надеюсь, это вдохновило некоторые идеи.

Answer 2

Я действительно не знаком с API, так что это длинный снимок. Если мое предположение, что пикс [п] представляет собой один пиксель значение RGB, то это скажет вам, если есть какой-либо красный цвет в пикселе:

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

Update: Если это так, то столкновение будет также:

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

Update 2:

Видимо, API говорит:

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

Таким образом, вы можете добиться того, что я обрисовал либо:

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

Или просто:

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