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

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

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

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

14
canvas getimagedata html5-canvas javascript

4 ответов

это интересная проблема... Вы не можете просто создать

33

новые версии 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);
7

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

var imageData = new ImageData(width, height);

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

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

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

1

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

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

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

0