畫布imagedata多個像素插入

我檢索畫布imagedata中的像素，我正在做很多。畫布imagedata多個像素插入

我認爲插入和從畫布imagedata檢索是在cpu時間昂貴，所以我想盡可能少的那些。

切割的一種方法是製作一個單一的插件，它可以在一個序列中插入多個像素，但到目前爲止，我還沒有看到如何做到這一點。到目前爲止，我看到的所有例子都只能檢索並插入一個像素。

所以問題是，爲了加快畫布imagedata像素操縱，我該如何插入/檢索多個像素同時？

檢索像素緩衝區時，只需選擇一個更大的區域：

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來更新緩衝區。你得到一個32位版本像這樣得到imageData後：

var buffer32 = new Uint32Array(imageData.data.buffer);

您的新buffer32將指向相同的底層字節的緩衝區所以沒有顯著的內存開銷，但它可以讓你閱讀和寫32位值而不是8位。請注意，字節順序（通常）是小端，因此要將字節排序爲ABGR。然後像以前一樣，在需要更新時請致電ctx.putImageData(imageData, x, y);。

2014-11-05 15:35:28 K3N

回答