检测浏览器是否可以渲染HEIC图像

Question

有没有简单的方法来检测浏览器是否可以渲染 HEIC 图像？

我可以想到一种方法，渲染像素heic图像并检查像素渲染后的颜色。比如：

const myImg = new Image();
myImg.crossOrigin = "Anonymous";
myImg.onload = () => {
  const context = document.createElement('canvas').getContext('2d');
  context.drawImage(myImg, 0, 0);
  const {
    data
  } = context.getImageData(10, 10, 1, 1);
  console.log(data)
}
myImg.src = 'https://picsum.photos/200/300';

想知道是否有更好的方法？

Answer 1

使用 image.decode 似乎有效。我无法测试，因为我没有 Safari

const jpg = new Image();
jpg.crossOrigin = "Anonymous";
jpg.src = 'https://picsum.photos/200/300';
jpg.decode().then(
    () => console.log("JPEG supported"), 
    () => console.log("JPEG NOT supported")
);

const heic = new Image();
heic.crossOrigin = "Anonymous";
heic.src = 'https://icanhazcode.com/image1.heic';
heic.decode().then(
    () => console.log("HEIC supported"), 
    () => console.log("HEIC NOT supported")
);