Как вы пишете ImageData в контекст холста HTML5?

Question

Я могу сгенерировать новый объект ImageData, но не могу отобразить его в контексте холста.По какой-то причине контексту canvas 2d не нравятся объекты ImageData , которые он создал .

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 50;
var height = 50;


var ci = ctx.createImageData(width,height); // ImageData { width: ..., height: ..., data: Uint8ClampedArray(10000) }

// Draw on ci ImageData object...

ctx.drawImage(ci, 0, 0, width, height);

Однако, это выдает ошибку:

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.

Как сделатьВы пишете ImageData объект на холст?

Answer 1

Чтобы записать ImageData объект обратно на холст, вы должны использовать context.putImageData () метод .

var ci = ctx.createImageData(width,height);
ctx.putImageData(ci, 0, 0);