Нарисуйте существующий 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>