Можно ли нарисовать Uint8ClampedArray непосредственно на холсте?

Question

В JavaScript вы можете управлять пикселями изображения напрямую, используя Uint8ClampedArray. Перед рендерингом, что изображение на холсте, вы должны:

1. Создать ImageData объект.

2. Продается Uint8ClampedArray объекту ImageData с ImageData.data.set.

3. Ничья, что ImageData объект с холстом context.putImageData.

Таким образом, от наличия Uint8ClampedArray с вашим изображением, на самом деле видеть его на экране, это занимает не менее 3 O (N), копирующие операции. Для больших изображений это может быть очень вредным. Одним из решений было бы кэшировать объект ImageData и заменить указатель imageData.data на ваш Uint8ClampedArray - но imageData.data - только для чтения! Есть ли способ сделать это более эффективно?

Answer 1

В соответствии с MDN's page on ImageData, то ImageData(array, width, height) конструктор принимает первый аргумент, который является

Uint8ClampedArray, содержащий основной пиксель представление изображения.

Быстрый тест проверяет, что этот аргумент используется в качестве ссылки (т.е., не копируются) как ImageData «ы data собственности. Этот тест журналы true:

var arr = new Uint8ClampedArray([0,0,0,0]); 
var idata = new ImageData(arr,1,1); 
console.log(idata.data === arr); 

Таким образом, вы можете исключить свой второй шаг, построив ImageData объект на первом этапе с data собственности, которая ссылается на свой Uint8ClampedArray объект.