0

我不确定如何正确使用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

我该怎么做？

4

2 回答 2

0

我真的不熟悉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;
}
于 2013-08-14T14:53:37.063 回答
0

首先，您需要在画布上加载图像。您可以尝试我的小提琴加载图像以获取更多信息。

一旦将图像加载到画布上，就可以使用object的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
}

希望这能激发一些想法。

于 2013-08-14T15:27:38.613 回答