createImageBitmap polyfill for Safari and Edge

Chris Coyier, the developer behind css-tricks.com recently tweeted:

Chris Coyier

@chriscoyier

Write the article you wish you found when you googled something.

19:27 PM - 30 Oct 2017

And so I'm about to do exactly that. I've been working on a web app game recently and I was bringing in some images dynamically using the Fetch API, and then drawing them on to a <canvas>. My simplified version of what I was doing was this:

async function getPicture(url) {
    return fetch(url)
    .then(x => x.blob())
    .then(x => createImageBitmap(x));
}

This worked great on Chrome. And not anywhere else for some reason. Even though ImageBitmap is in the HTML spec.

And so after a really long time, I came up with the following polyfill:

Feel free to use it anywhere you like, and save yourself the headache that I've had for so long.

Edit: ImageBitmap works on Firefox, but recently I've been using ES6 Modules as well, which aren't enabled in Firefox by default at the time of this writing.

Comments

[Andrew Eisenberg]

Thanks for this it's useful for me. However, every time you are finished with a url created by URL.createObjectURL, you need to call URL.revokeObjectURL.

Not exactly sure the best way around this. And the memory leak is only important if you are creating many image bitmaps. Though it is an important thing to know.