在不复制的情况下将现有的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()一起使用。

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