Тестирование поддержки формата изображения с использованием простого JavaScript
8 марта 2023 г.Вот два простых скрипта Async/Await JavaScript, которые обнаружат и укажут на поддержку браузером форматов изображений AVIF и WEBP.
Приведенные ниже сценарии отображают результаты проверки поддержки путем добавления класса в список классов элемента документа. Мы размещаем скрипт сразу после тега .
Используемый здесь метод заключается в попытке создать объект изображения в тестовом формате из представления изображения в кодировке base64. Ниже приведено содержимое двух скриптов.
<body>
<script> //place this script just under the <body> tag
async function supportsAvif() { // check for avif image support
const fallbackclass = 'no-avif'
if (!this.createImageBitmap) return fallbackclass
const avifData = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='
avifblob = await fetch(avifData).then((r) => r.blob());
return createImageBitmap(avifblob)
.then(() => 'avif')
.catch(() => fallbackclass)
}
(async () => {
document.body.classList.add(await supportsAvif()) //show result in body class
})()
async function supportsWebp() { // check for webp image support
const fallbackclass = 'no-webp'
if (!this.createImageBitmap) return fallbackclass
const webpData = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='
webpblob = await fetch(webpData).then((r) => r.blob());
return createImageBitmap(webpblob)
.then(() => 'webp')
.catch(() => fallbackclass)
}
(async () => {
document.body.classList.add(await supportsWebp()) //show result in body class
})()
</script>
...
...
</body>
Теперь подробности того, что вы будете делать с этой добавленной информацией о классе, будут оставлены на ваше усмотрение, но одна из идей может состоять в том, чтобы переключить видимость объекта изображения
Вот еще один простой скрипт, относящийся к поддержке формата изображения. Дело в том, что Apple Mobile Safari не поддерживает файлы AVIF. Что проблематично, так это то, что он утверждает, что делает это, что дает вам возможность увидеть, правильно ли отображается ваш замещающий текст. Менее оскорбительным, но все же проблематичным является Firefox, который поддерживает формат AVIF, но не поддерживает анимацию AVIF. Вы получаете предварительный просмотр неподвижного изображения. Этот пример скрипта вставляется в раздел
документа, и для нашего примера он выполняет простое перенаправление на другую страницу без содержимого AVIF. Конечно, не самое элегантное решение, но оно выполняет свою работу, и когда Apple и Firefox догонят его, его будет легко удалить. ☺ <head>
...
<script>
// safari mobile does not display AVIF or AVIF animation files
// Firefox does not display AVIF aninmations as animated
window.addEventListener("load", () => {
//console.info("index "+navigator.userAgent.indexOf("Edg"));
console.info("user agent "+navigator.userAgent);
if ((navigator.userAgent.indexOf("iPhone") != -1 ) || (navigator.userAgent.indexOf("Firefox") != -1 )) {
console.info("its an iPhone or Firefox");
//window.location.replace("https://new-URL");
} else {
console.info("not an iPhone or Firefox"); }
});
</script>
...
</head>
Надеемся, что эти части будут полезны для управления вашим собственным веб-контентом. Как всегда, комментарии, критика и предложения приветствуются.
Оригинал