RE: Async Image -> ImageData conversion

I think solving at least the first-order problem of extracting data from the Canvas async is do-able.

Something like:

Promise<ImageData> getImageDataAsync(x,y,w,h);

seems sensible to add ☺

From: ash@scirra.com [mailto:ash@scirra.com] On Behalf Of Ashley Gullen
Sent: Wednesday, June 17, 2015 10:00 AM
To: public-webapps@w3.org
Subject: Async Image -> ImageData conversion

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