javascript - 如何从整个图像的缓存像素数据中获取 Canvas ImageData的矩形部分？

使用ctx.getImageData(x, y, w, h)可以检索图像矩形部分的像素数据；

但是，我需要对数据的各个部分执行大量检查。每次提取图像数据都很昂贵。因此，我想缓存整个画布图像数据，并有一个函数返回该缓存数据中给定矩形的像素。

换句话说，如果我已经预先检索了整个画布的图像数据并将其缓存到变量中，那么如何从该缓存中提取出像素数据的矩形部分呢？

任何帮助将不胜感激。

最佳答案

这是解析较大位图数组[rx, ry, rwidth, rheight]的区域的一种方法：

for(var y = ry; ry < (ry + rheight); y++) {
    for(var x = rx; x < (rx + rwidth); x++) {

        var pos = (y * width + x) * 4;  /// for byte arrays
        var pos =  y * width + x;       /// for Uint32 arrays
    }
}

pos是数组中的位置。如果不需要检查各个组件（或者可以使用静态的32位值进行比较），建议您在缓冲区上使用Uint32Array视图，该视图比迭代字节数组快得多。

但是，提取区域可能比使用getImageData()慢，因为您需要使用JS进行如上所述的迭代来获取区域，然后再次使用JS进行迭代以解析数据。