检查一个区域中的所有像素在Javascript中是否都是空的？

Question

我有一个 2D 画布，上面画了一些东西，我想知道一个区域中的所有像素 (rect - x,y,w,h) 是否都是空的/完全透明的？我知道这可以用 getImageData 完成，但有更快的方法吗？我正在编写一个简单的 java 脚本图像打包器，我希望从最终工作表中排除空图像。

Answer 1

读取像素的唯一方法是使用getImageData()，但您可以通过使用与默认Uint8ClampedArray不同的视图来加速这种检查，例如Uint32Array，它允许您读取单个像素每次迭代：

function isEmpty(ctx, x, y, w, h) {

    var idata = ctx.getImageData(x, y, w, h),      // needed as usual ...
        u32 = new Uint32Array(idata.data.buffer),  // reads 1x uint32 instead of 4x uint8
        i = 0, len = u32.length;

    while(i < len) if (u32[i++]) return false;     // if !== 0 return false, not empty
    return true                                    // all empty, all OK
}

但是，这不能用于检查透明度。即使一个像素是完全透明的，其他通道中也可能存在颜色数据。例如，这会产生一个不可见的像素：rgba(255,128,0,0) 和 isEmpty() 会报告该区域是非空的，即使该像素不可见。

要检查这些情况，您只需要检查 Alpha 通道，您可以简单地修改上面的内容以使用 AND 掩码来过滤颜色数据，或者将 Alpha 通道位移过来，将其他位推出- 无论哪种情况，我们都追求非 0 值。

由于这是小端 (LSB) 格式（在当今大多数主流计算机上），组件的顺序为 ABGR (0xAABBGGRR)，因此我们可以：

u32[i] & 0xff000000

或使用移位（符号在这种情况下并不重要，但我个人更喜欢在处理无符号数字时使用无符号移位（>>> 而不是 >>））：

u32[i]>>>24

性能方面差别很小，如果有的话，我猜 ANDing 会稍微快一点：

与

function isTransparent(ctx, x, y, w, h) {

    var idata = ctx.getImageData(x, y, w, h),       // needed as usual ...
        u32 = new Uint32Array(idata.data.buffer),   // reads 1x uint32 instead of 4x bytes
        i = 0, len = u32.length;

    while(i < len) if (u32[i++] & 0xff000000) return false; // not transparent?
    return true                                     // all transparent, all OK
}

位移

function isTransparent(ctx, x, y, w, h) {

    var idata = ctx.getImageData(x, y, w, h),       // needed as usual ...
        u32 = new Uint32Array(idata.data.buffer),   // reads 1x uint32 instead of 4x bytes
        i = 0, len = u32.length;

    while(i < len) if (u32[i++]>>>24) return false; // not transparent?
    return true                                     // all transparent, all OK
}

更新：

加速技巧

如果您知道要检查的数据至少有一定大小，比如说 2x2 像素，您还可以通过跳过每隔一个像素，甚至每隔一行来提高速度：

while(i < len) if (u32[(i += 2)]>>>24) return false; // skips every 2. pixel

对于行，你需要两个迭代器：

while(i < len) {
    var endLine = i + width, p = i;  // p in case you deal with odd widths
    while(p < endLine) if (u32[(p += 2)]>>>24) return false; // skip every 2. pixel
    i += width * 2;  // skip a line
}