Javascript 查看画布是否有任何数据(黑色除外)
我正在创建一个小应用程序,在其中我拍摄一张照片,提取RGB通道(将它们放在3个单独的画布中),并将它们转换为alpha mask,见下文 我必须检查生成的通道中是否有任何数据(黑色除外)。最有效的检查方法是什么 最准确的方法是遍历所有像素,并查看其中一些值是否大于0。但我希望避免这种情况,以节省一些处理器速度(特别是因为web应用程序将用于手机/平板电脑) 我曾尝试使用临时画布保存一个图层,并将其缩小到1px,然后检查图像数据。这是可行的,但并不准确。我也试着缩小到10x10px,它更精确,但在第三张图片上它给了我假 我使用这个简单的代码来缩小结果Javascript 查看画布是否有任何数据(黑色除外),javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我正在创建一个小应用程序,在其中我拍摄一张照片,提取RGB通道(将它们放在3个单独的画布中),并将它们转换为alpha mask,见下文 我必须检查生成的通道中是否有任何数据(黑色除外)。最有效的检查方法是什么 最准确的方法是遍历所有像素,并查看其中一些值是否大于0。但我希望避免这种情况,以节省一些处理器速度(特别是因为web应用程序将用于手机/平板电脑) 我曾尝试使用临时画布保存一个图层,并将其缩小到1px,然后检查图像数据。这是可行的,但并不准确。我也试着缩小到10x10px,它更精确,但在
ctx.drawImage(bc,0,0,8,10)
fdata = ctx.getImageData(0,0,8,10)
对于上面显示的图像。这个方法给了我:
第一张图片:0,0,0253(检测数据)
第二张图片:0,0,0,2(检测到)
第三张图片:0,0,0255(未检测到)
有什么想法吗?您可以尝试使用Canvas.todata URL将图像的base64表示形式与自生成的相同尺寸的全黑图像进行比较。您还可以做什么: 使用一个临时的、一次性实例化的画布,比如16X16大小,然后针对每个测试:
-清除此画布。
-循环浏览原始图像的每个16X16块,并将其复制到画布上。
-检查画布的imageData 类似于(未经测试):
var isBlank=(函数(){
var块大小=16;
var tstCv=document.createElement('canvas');
tstCv.width=块大小;
tstCv.height=块大小;
var tstCtx=tstCv.getContext('2d');
函数为空(tgtCanvas){
tstCtx.clearRect(0,0,blockSize,blockSize);
对于(变量y=0;y
它应该是非常有效的,因为您将使用图形卡逐块求和像素,然后手动检查少量数据。您使用什么来缩放它?您能目视检查10x10px的结果吗?如果缩放中的插值消除了白色像素,那么……正如我在帖子中所说,我使用这行
ctx.drawImage(bc,0,0,8,10)
(本例中为8x10px)。@sahbeewah将.toDataURL与全黑色进行比较。toDataURL速度惊人。我怀疑如果只比较.toDataURL().length会更快。如果使用.toDataURL().length,则可以在开始使用原始画布进行绘图并保存其.toDataURL().length之前将其全部变黑。无论如何,在.toDataURL().length和您所使用的方法之间看到一个perf测试是很有趣的propose@markE考虑到这个问题(画布的无损性质),我想知道toDataURL方法有多准确。“尽管如此,这真是个有趣的想法。”洛克塔说。啊,是的……很好的观点(!)——推杆!=遇到问题。这让我需要更多关于提问者用于隔离RGB通道和创建alpha遮罩的技术的信息。另外,我只是猜测他的代码可能是什么,但在我看来,非黑色像素可以在过程的早期识别——可能是在创建通道时。
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;
})();