loading...

createImageBitmap polyfill for Safari and Edge

nektro profile image Meghan Denny ・1 min read

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));
}

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.

Posted on Nov 7 '17 by:

nektro profile

Meghan Denny

@nektro

23. Local trans witch who prefers to do magic with a keyboard. she/her. Currently hacking away at making the Web less centralized.

Discussion

markdown guide
 

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.