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

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

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

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

Ответ 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];
}

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

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

Ответ 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);

Ответ 3

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

var imageData = new ImageData(width, height);

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

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

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

Ответ 4

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

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

Подробнее см. здесь.