Canvasに既存の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>