如何快速地将数组缓冲区中的像素绘制到画布上？

Question

我有一个asmjs模块，它在名为'MEM'的ArrayBuffer上工作。重绘函数在每个循环中被调用。前'siz'字节存储像素颜色。我的代码可以工作，但运行速度很慢。有没有可能通过某种方式使其更快？数组缓冲区不能是'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);
};

- Iter Ator

---

使用 Uint32Array 缓冲区替代？ - user1693593

怎么做呢？ImageDada.data 是一个 UInt8ClampedArray，所以我创建了一个 Uint8Array，然后复制每个元素。 - Iter Ator

请看这里：http://stackoverflow.com/questions/20811194/fast-way-to-fill-a-canvas-with-an-array-of-rgba-colors/20814610#20814610 - GameAlchemist

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));

- markE

---

未捕获的范围错误：源太大。 - Iter Ator

我猜你的缓冲区大小可能比siz大。所以你可以用以下代码来削减MEMU8：imgData.data = converterArray.set(MEMU8.subarray(0,siz)); - markE