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

现在，为了安全 - 如果画布上没有白色 - ＆gt;碰撞

但我想识别红色#ff0000或绿色#00CC00

我该怎么做？

Answer 1

我真的不熟悉API，所以这是一个很长的镜头。如果我假设pix [n]代表单个像素RGB值，那么这将告诉你像素中是否有红色：

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

更新：如果是这种情况，那么碰撞也将是：

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

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

Answer 2

首先，您需要在画布上加载图像。您可以尝试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
}

希望这能激发一些想法。

使用getImageData识别某些颜色

2 个答案: