在不復制的情況下將現有的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>