如何检查浏览器是否支持AVIF图像

Question

如何使用 JavaScript 检测浏览器是否支持 AVIF 图像？我已经查看了这个问题，在阅读答案后，我能够构建一个有用的单行函数来检查浏览器对各种图像类型的支持。

const isSupported = (type) => document.createElement('canvas').toDataURL(`image/${type}`).indexOf(`data:image/${type}`) === 0;

它适用于

webp

（以及

jpeg

和

png

）图像。但它不适用于

avif

（和

gif

）图像。

“不工作”这个词，我的意思是即使浏览器支持 AVIF 图像，该函数也会返回 false。 那么，这种方法有什么问题呢？使用

JavaScript

检测浏览器对

avif

图像的支持的正确方法是什么？

Answer 1

var avif = new Image();
avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
avif.onload = function () {
 /* do something * /
};

另一种方法是使用承诺：

  new Promise(() => {
    const image = new Image();
    image.onerror = () => /* do something */
    image.onload = () => /* do something */
    image.src =
      "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
  }).catch(() => false);

我们使用尽可能小的源创建一个新图像并尝试加载它。它工作可靠，并在 Firefox、Edge、IE、Chrome、Opera 和 Safari 上进行了测试，包括移动支持。也许您可以根据您的意图创建一个 Oneliner！我希望看到更智能、更精简的方法来检查 AVIF 支持。

来源：

https://avif.io/blog/tutorials/css/#avifsupportdetectionscript
https://github.com/leechy/imgsupport/blob/master/imgsupport.js
https://github.com/justinschmitz97/avif.io/blob/master/components/Layout/Header.tsx

Answer 2

Promise

的解决方案。

const isFormatSupported = (format, dataUri) =>
  new Promise((resolve, reject) => {
    const image = new Image();

    image.src = `data:image/${format};base64,${dataUri}`;

    image.onload = () => {
      resolve(true);
    };

    image.onerror = () => {
      reject(format.toUpperCase() + "format not supported");
    };
  });

const supportsAvif = await isFormatSupported(
  "avif",
  "AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="
);

Answer 3

// Check for AVIF support » MAINLY FOR EDGE USERS with version 115 and older
function isAVIFSupported() { const img = new Image();   return img.decode ? true : false; }
if (!isAVIFSupported()) {
  // Display alert if AVIF is not supported or handle the situation your way
  console.warn("AVIF images are NOT supported.");
} else { console.log("AVIF images are supported."); }

继续使用不支持 avif 文件的浏览器进行测试。添加评论以报告您的结果以及浏览器名称和版本。