¿Cómo puedo detectar si el navegador admite imágenes AVIF usando JavaScript ? He visto esta pregunta y, después de leer las respuestas, pude crear una función útil de una sola línea para verificar la compatibilidad del navegador con varios tipos de imágenes.
const isSupported = (type) => document.createElement('canvas').toDataURL(`image/${type}`).indexOf(`data:image/${type}`) === 0; Y funciona bien para webp (y jpeg y png ). Pero no funciona para avif (y gif ).
Por la palabra No funciona , quiero decir que la función devuelve falso incluso si el navegador admite imágenes AVIF.
Entonces, ¿qué tiene de malo este enfoque? ¿Y cuál es la forma correcta de detectar la compatibilidad del navegador con las imágenes avif usando JavaScript ?
Por lo que sé, el navegador no puede crear archivos AVIF, JXL o GIF con el método toDataURL a partir de un lienzo. Actualmente utilizo el siguiente método para detectar la compatibilidad con AVIF a través de Javascript:
var avif = new Image(); avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="; avif.onload = function () { /* do something * / };Otro enfoque sería usar una promesa:
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);Creamos una nueva imagen con la fuente más pequeña posible e intentamos cargarla. Esto funciona de manera confiable y se probó en Firefox, Edge, IE, Chrome, Opera y Safari, incluida la compatibilidad con dispositivos móviles. ¡Tal vez puedas crear un oneliner para tus intenciones a partir de él! Me encantaría ver enfoques más inteligentes y ágiles para verificar el soporte de AVIF.
Fuentes:
Aquí hay otra verdadera solución basada en 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=" );