如何快速將像素從arraybuffer繪制到畫布上？

Question

我有一個asmjs模塊，該模塊可在名為“ MEM”的ArrayBuffer上工作。 重新繪制函數在每個循環中調用。 在第一個“ siz”字節中是存儲的像素顏色。 我的代碼可以運行，但是運行緩慢。 是否可以以某種方式使其更快？ arraybuffer不能為'siz'長度，因為該模塊可在整個ArrayBuffer上工作。

var MEM = new ArrayBuffer(2*1024*1024);
var MEMU8 = new Uint8Array(MEM);
var imgData=ctx.createImageData(canvas.width,canvas.height);
var siz = (canvas.width*canvas.height*4)|0;

var rePaint = function() {
    var i=0;

    module.repaint();

    i=siz;
    while(i--) {
        imgData.data[i] = MEMU8[i];
    }

    ctx.putImageData(imgData, 0, 0);
    requestAnimationFrame(rePaint);
};

Answer 1

您可以使用類型化數組的.set方法獲得性能：

不幸的是，IE仍然使用CanvasPixelArray而不是新的html規范（Uint8ClampedArray）。 IE的imageData.data還沒有.set方法。

但是您仍然可以通過轉換數組間接使用.set：

// create a typed array to pipe data through
// (used to be able to do .set later)

buffer = new ArrayBuffer(imgData.data.length);

converterArray=new Uint8Array(buffer);

// In repaint

imgData.data = converterArray.set(MEMU8.subarray(0,siz));