看看canvas是否有任何数据（黑色除外）

Question

我创建了一个小应用，我在其中拍摄照片并提取RGB通道（将它们放在3个单独的画布中）并将它们转换为alpha蒙版，如下所示。

我必须检查生成的频道中是否有任何数据（黑色除外）。什么是最有效的检查方式？

最准确的是循环遍历所有像素并查看某些值是否大于0.但我想避免这样做以节省一些处理器速度（特别是因为网络应用程序将用于手机/平板电脑）。

我尝试过使用临时画布，然后保存图层并将其缩小到1px，然后检查图像数据。这有效，但不准确。我也尝试缩小到10x10px，它更准确，但仍然在第3张图片上它给我假。

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

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

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

第1张图：0,0,0,253（检测数据）

第二张图片：0,0,0,2（已检测到）

第3张照片：0,0,0,255（未检测到）。

任何想法？

Answer 1

你还能做什么： 使用一个临时的，一次性实例化的画布，其尺寸为16X16，然后用于每个测试：
- 清除这个画布 - 循环浏览原始图像的每个16X16块并将其复制到画布上 - 检查画布的imageData。

类似（未经测试）：

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

它应该非常高效，因为您将使用图形卡逐块累加像素，之后您只需手动检查少量数据。

Answer 2

您可以尝试使用Canvas.toDataURL将图像的base64表示与自生成的相同尺寸的全黑图像进行比较。