Как создать новый объект ImageData самостоятельно?

Question

Я хочу создать новый объект ImageData в коде. Если у меня есть Uint8ClampedArray из чего я хочу сделать объект изображения, каков наилучший способ сделать это?

Я думаю, я мог бы создать новый элемент canvas, извлечь его ImageData и переписать его атрибут данных, но это кажется неправильным подходом.

Было бы здорово, если бы я мог использовать конструктор ImageData напрямую, но я не могу понять, как это сделать.

Answer 1

Это интересная проблема... Вы не можете просто создать ImageData объект:

var test = new ImageData(); // TypeError: Illegal constructor

Я также попробовал:

var imageData= context.createImageData(width, height);
imageData.data = mydata; // TypeError: Cannot assign to read only property 'data' of #<ImageData> 

но, как описано в MDN data собственность только для чтения.

Поэтому я думаю, что единственный способ - создать объект и задать свойство данных с помощью итерации:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
for(var i = 0; i < myData.length; i++){
    imageData.data[i] = myData[i];
}

Обновление: я обнаружил set метод в data Свойство ImageData, поэтому решение очень простое:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);

Answer 2

Новейшие версии Chrome и Firefox уже поддерживают ImageData конструктор. Вы можете найти его определение в MDN.

Для других браузеров вы можете создать этот конструктор самостоятельно:

function ImageData() {
    var i = 0;
    if(arguments[0] instanceof Uint8ClampedArray) {
        var data = arguments[i++];
    }
    var width = arguments[i++];
    var height = arguments[i];      

    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.createImageData(width, height);
    if(data) imageData.data.set(data);
    return imageData;
}

Вы можете использовать это так:

var imgData1 = new ImageData(data, width, height);
var imgData2 = new ImageData(width, height);

Answer 3

ImageData Конструктор, наконец, становится доступным в Chrome и Firefox (см. таблицу совместимости на MDN). Есть две формы:

var imageData = new ImageData(width, height);

и если вы хотите построить экземпляр с UInt8ClampedArray объект data:

var imageData = new ImageData(data, width, height); // height is optional

По причинам совместимости лучше всего использовать createImageData через 2D-контекст холста, как показано в других ответах.

Answer 4

Здесь createImageData() метод. Но для этого вам нужен контекст существующего холста.

var myImageData = context.createImageData(cssWidth, cssHeight);

Смотрите здесь для получения дополнительной информации.