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()一起使用。

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

将一个现有的ArrayBuffer绘制到Canvas中而不进行复制

1 个答案: