Using ImageData object in drawImage

Question

Is it possible to use ImageData array object to get an Image() object. My eventual goal is to use drawImage instead of putImageData since putImageData is too slow (from stackoverflow similar qs and my own tests). All I have is ImageData array that I want to draw on top of an existing image on a canvas .

Answer 1

You can create an ImageBitmap from an ImageData and pass that to drawImage(). https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

Something like:

const imgdata = ...;
const ctx = ...;

createImageBitmap(imgdata).then(function(imgBitmap) {
    ctx.drawImage(imgBitmap, ...remaining args);
});

I was able to do this to scale some ImageData I had, since putImageData does not have arguments for scaling. Unfortunately, it looks like IE, Edge, and Safari do not support createImageBitmap().

It's worth mentioning that for my case (resizing the ImageData), createImageBitmap() does have extra options for resizing the resulting ImageBitmap on its own.