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: .js

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./Kagami/avif.js

• javascript
• html
• avif

Share Improve this question Follow asked Apr 14, 2020 at 10:57 quarksquarks 35.4k8282 gold badges308308 silver badges547547 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 uping Firefox releases. (likely 87 or 88)