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

James · Answer 1 · 2021-03-01T07:31:05.677

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

edited Mar 01 '21 at 07:31

answered Jan 10 '21 at 01:13

James

773
2
18
29

1

thanks for this answer. in the meantime, what are the options for server-side conversion of PNG/JPG to AVIF? – Crashalot Jan 10 '21 at 06:43
1

Sadly, Firefox 86 will not support AVIF yet (issues with colors). – ViliusL Feb 28 '21 at 16:28
Thanks for bringing that to my attention. Updated the answer to reflect the current status. – James Mar 01 '21 at 07:31

Create image from Canvas with AVIF image format

1 Answers1