Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Detect if browser can render HEIC image

Is there an easy way to detect if a browser can render HEIC image?

I can think of one way, render a pixel heic image and check the color of the pixel post render. Something like:

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';

Wondering, if there is a better way?

Tags:

2

Answers


  1. 0

    Using image.decode seems to work. I can’t test since I don’t 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.src = 'https://icanhazcode.com/image1.heic';
heic.crossOrigin = "Anonymous";
heic.decode().then(
    () => console.log("HEIC supported"), 
    () => console.log("HEIC NOT supported")
);
    Login or Signup to reply.
  2. 0 
    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.src = 'https://icanhazcode.com/image1.heic';
heic.crossOrigin = "Anonymous";
heic.decode().then(
    () => console.log("HEIC supported"), 
    () => console.log("HEIC NOT supported")
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search