javascript - 检查 Canvas 是否为黑色

Question

我有一个脚本，可以拍照并创建黑白 R、G 和 B channel 。我想计算有多少个 channel 上有内容(黑色 = 无颜色，白色 = 彩色数据)。

它的工作原理是遍历每个像素并将数据保存在 3 个不同的 Canvas 元素中。每个显示不同的 channel 。

效果很好，但是当我只给出红色和蓝色图片时，绿色 channel (显然)是全黑的。

所以我的问题是，如何检查 Canvas 是否全黑？我想避免循环遍历每个 channel 中的每个像素来查看它是否全黑。

干杯

Answer 1

好的，我已经测试了一些东西，我能想到的最简单的解决方案是创建一个 1x1 离屏 Canvas ，然后绘制您想要检查其数据的图像或原始 Canvas ，缩小到 1 像素并检查它(我还添加了基本缓存)。

这不是一个精确的检查，结果取决于像素数据在原始图像中的分布方式，因此正如 GameAlchemist 所指出的，如果你想要准确，如果检查结果为 0，你可以循环遍历所有像素结果。

function quickCheck(img){
    var i = arguments.callee; //caching the canvas&context in the function
    if(!i.canvas){i.canvas = document.createElement("canvas")} 
    if(!i.ctx)   {i.ctx    = i.canvas.getContext("2d")}

    i.canvas.width=i.canvas.height = 1;
    i.ctx.drawImage(img,0,0,1,1);
    var result = i.ctx.getImageData(0,0,1,1);
    return result.data[0]+result.data[1]+result.data[2]+result.data[3];
}