createImageBitmap polyfill for Safari and Edge

Meghan (she/her) - Nov 7 '17 - - Dev Community

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

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));
}
Enter fullscreen mode Exit fullscreen mode

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .