I was wondering if there is anything on the standards track to
asynchronously get an ImageData object from an Image?

We have a web app dealing with large sprite sheets (up to 2048x2048), and
at some point we need to get an ImageData for this. Currently the only way
I know of doing this is via a canvas 2d context like so:

function ImageToImageData(img)
{
let w = img.width;
let h = img.height;
 let canvas = document.createElement("canvas");
canvas.width = w;
canvas.height = h;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return ctx.getImageData(0, 0, w, h);
};

This whole function is synchronous. With large images, in Chrome the
getImageData call can jank for well over 100ms on a high-end desktop
machine. Maybe this can be faster but I really doubt this whole function is
likely to be done in <16ms on low-end devices, so I believe there ought to
be an async alternative. As far as I am aware there is none.

Ideally we could have an async ImageData.fromImage(img) method or similar.
It would also be useful if we could decode directly from Blob to ImageData
without having to go via an Image as well (perhaps ImageData.fromBlob(blob)
?).

More broadly, it would be good to have a comprehensive set of async
conversion functions between Blob, Image, and ImageData. Blob -> Image can
already be done by setting the image src to a blob URL, but basically
everything else requires going synchronously through a 2D canvas, which
janks apps which have to process lots of large images. Running a canvas in
a worker could possibly help, but that would require both Blob and Image to
be transferable to be useful.

Ashley Gullen
Scirra.com

Reply via email to