在不复制的情况下将现有的ArrayBuffer绘制到画布中

Question

我有一个Uint8ClampedArray包含位图的。下面的作品，但我想避免缓冲区的复制，据我所知ImageData.set复制ArrayBuffer。

var mappedBuffer = new Uint8ClampedArray(Module.HEAPU8.buffer, offset, length); // Creates a view on the emscripten heap
var imageData = ctx.createImageData(width, height);
imageData.data.set(mappedBuffer); // copy here
ctx.putImage(imageData, 0, 0);

有没有一种避免复制的方法，以便我们可以直接绘制到画布上而无需先复制？

Answer 1

现在有ImageData手动创建的功能，可以在某些浏览器中使用（供工作者使用，但也可以在主线程中使用）。它需要一个Uint8ClampedArray顶部为视图的现有数组作为参数以及宽度和高度。

由于采用了视图，因此ArrayBuffer仅引用基础而不是复制基础（请记住，putImageData()始终需要复制数据）。

var iData = new ImageData(clampedArray, width, height);

然后可以与结合使用putImageData()。

var iData = new ImageData(clampedArray, width, height);

// create custom array view and fill with some random data
var array = new Uint32Array(100*100);
for(var i=0; i < array.length; i++) array[i] = 0xff000000|(Math.sin(i*0.0001)*0xffffff);

// create ImageData instance
var iData = new ImageData(new Uint8ClampedArray(array.buffer), 100, 100);
var ctx = c.getContext("2d");
ctx.putImageData(iData, 0, 0);