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

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

有没有什么方法可以避免复制，这样我们就可以直接在画布上绘制而不需要先复制呢？

- Philipp

Answer 1

现在可以手动创建ImageData，并在某些浏览器中使用（旨在用于工作线程，但也可以从主线程中使用）。它以现有的带有Uint8ClampedArray视图的数组作为参数，同时提供宽度和高度。

由于它使用了视图，因此底层的ArrayBuffer只是被引用而不是被复制（只要记住putImageData()始终需要复制数据即可）。

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

这样就可以与putImageData()一起使用。

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

<canvas id=c width=100 height=100></canvas>

- user1693593