Create image from Canvas with AVIF image format

Question

AVIF a very promising image format/codec which based on the sample is far better than JPEG. My question is how do you create a AVIF image from a Canvas?

So instead of JPEG, something like:

canvas.toBlob(function (blob) {}, "image/avif", 1.0)

Is there a polyfill or something to make it work in the browser (encoding image part)?

Reference: https://github.com/Kagami/avif.js

Answer 1

Currently no browsers support creation of an AVIF from a canvas, but that should change soon.

• Chrome can already consume AVIF images, so should be able to generate them from canvas soon.
• Firefox will add AVIF support in one of the upcoming Firefox releases. (likely 87 or 88)