在javascript中获取像素颜色

时间:2014-04-27 15:51:56

标签: javascript canvas pixel getimagedata

这可能是一个非常基本的问题,但由于我是javascript的新手,我无法找到解决问题的正确方法。我需要做一个if语句来检查像素颜色,如果它是黑色的 - 如果不是则做一些事情 - 做别的事。 (这是一个反向传播项目,这就是迭代的原因)

for(i=1;i<iterations;i++) {
for(j=1;j<300;i+=2) { //canvas size is 300x300
for(k=1;k<300;i+=2) {
if (context.getImageData(j,k,1,1).data == [0, 0, 0, 0])
{/*code to be executed*/}
else {/*other code*/}
}
}
}

很抱歉要问一些简单的东西,但我没有太多时间这么做,所以现在不能从基础知识开始。

1 个答案:

答案 0 :(得分:1)

您需要比较数组中的每个项目:

var pixel = context.getImageData(j,k,1,1).data; // cache array
if (pixel[0] === 0 &&                           // R
    pixel[1] === 0 &&                           // G
    pixel[2] === 0 &&                           // B
    pixel[3] === 0) {                           // A

    ...
}

更好的是,不要对每个像素使用getImageData(),而是在开始迭代之前对其进行缓存:

var x, y,
    buffer = context.getImageData(0, 0, 300, 300).data;

for(y = 0; i < 300; y++) {
    for(x = 0; x < 300; x++) {
        var pos = (y * 300 + x) * 4;
        if (buffer[pos]   === 0 &&               // R
            buffer[pos+1] === 0 &&               // G
            buffer[pos+2] === 0 &&               // B
            buffer[pos+3] === 0) {               // A

            ...was black...
        }
        else {
            ...was not black...
        }
   }
}