javascript - 查看 Canvas 是否有任何数据(黑色除外)

Question

我正在创建一个小应用程序，在其中拍照并提取 RGB channel (将它们放入 3 个单独的 Canvas 中)并将它们转换为 alpha 蒙版，请参见下文。

我必须检查生成的 channel 中是否有任何数据(黑色除外)。检查这一点最有效的方法是什么？

最准确的方法是循环遍历所有像素并查看某些值是否大于 0。但我想避免这种情况以节省一些处理器速度(特别是因为网络应用程序将在手机/平板电脑上使用)。

我尝试使用临时 Canvas ，在其中保存一个图层并将其缩小到 1px，然后检查图像数据。这有效但不准确。我还尝试缩小到 10x10px，它更准确，但在第三张图片上它仍然给我错误。

我使用这个简单的代码来缩小结果

ctx.drawImage(bc,0,0,8,10)
fdata = ctx.getImageData(0,0,8,10)

对于上面显示的图像。这个方法给了我:

第一张图片:0,0,0,253(检测到的数据)

第二张图片:0,0,0,2(检测到)

第三张图片:0,0,0,255(未检测到)。

有什么想法吗？

Answer 1

你还可以做什么:使用临时的、一次性实例化的 Canvas ，例如 16X16 大小，然后对于每个测试:
- 清除此 Canvas 。
- 循环遍历原始图像的每个 16X16 block 并将其复制到 Canvas 上。
- 检查 Canvas 的图像数据。

类似于(未经测试):

var isBlank = (function () {
    var blockSize = 16;
    var tstCv = document.createElement('canvas');
    tstCv.width = blockSize;
    tstCv.height = blockSize;
    var tstCtx = tstCv.getContext('2d');

    function _isBlank(tgtCanvas) {
        tstCtx.clearRect(0, 0, blockSize, blockSize);
        for (var y = 0; y < tgtCanvas.height; y += blockSize) {
            for (var x = 0; x < tgtCanvas.width; x += blockSize) {
                tstCtx.drawImage(tgtCanvas, x, y, blockSize, blockSize, 0, 0, blockSize, blockSize);
            }
        }
        var data = tstCtx.getImageData(0, 0, blockSize, blockSize).data;
        var i = 0,
            l = data.length;
        while (i != l) {
            if ( data[i+3]!=255 /* some test on data[i+?] */ ) return false;
            i += 4;
        }
        return true;
    }  
    return _isBlank;    
})();

它应该非常高效，因为您将使用显卡逐 block 求和像素，之后您只需手动检查少量数据。