Canvas imagedata多像素插入

Question

我正在检索画布imagedata中的像素，我做了很多这样的工作。

我认为插入和检索画布imagedata在cpu时间上是昂贵的，所以我希望尽可能少使用这些数据。

切割的一种方法是做一个插入，在一个序列中插入多个像素，但到目前为止，我还没有看到如何做到这一点。到目前为止，我看到的所有示例都只检索和插入了一个像素。

因此，问题是，为了加快画布imagedata像素的操作速度，我如何同时插入/检索多个像素？

Answer 1

检索像素缓冲区时，只需选择更大的区域：

var imageData = ctx.getImageData(x, y, width, height);
                                       ^^^^^^^^^^^^ not limited to one

现在，数据缓冲区将包含给定区域的所有像素。为了得到整个画布：

var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

调整它们并把它们放回相同的位置：

ctx.putImageData(imageData, x, y);

你就完蛋了。

记住，每个像素由四个字节组成(RGBA)。要处理更大的缓冲区，您可以这样做：

function getPixelIndex(x, y) {
    return (y * width + x) * 4; // width used when getting buffer
}

提示：

• 如果您计划更新同一个缓冲区，通常只需检索缓冲区一次并存储指向该缓冲区的指针，则在需要时更新该缓冲区并将其放回，然后重用相同的缓冲区。这样可以节省获取缓冲区的时间。如果你同时用标准的方法将图形应用到画布上，这是行不通的。
• 您还可以使用createImageData()而不是getImageData()从空缓冲区开始。
• 如果像素颜色数据或多或少是静态的，则可以使用Uint32Array而不是Uint8ClampedArray更新缓冲区。在获得imageDatavar buffer32 = new Uint32Array(imageData.data.buffer);之后，您将得到这样的32位版本。

您的新buffer32将指向相同的底层字节缓冲区，因此不会造成很大的内存开销，但它允许您读取和写入32位值，而不仅仅是8位。请注意，字节顺序(通常)是小端点，所以将字节排序为ABGR。然后像以前一样，在需要更新时调用ctx.putImageData(imageData, x, y);。