检测 WebP 支持 [英] Detecting WebP support

问题描述

如何通过 Javascript 检测对 WebP 的支持?如果可能，我想使用功能检测而不是浏览器检测，但我找不到这样做的方法.Modernizr (www.modernizr.com) 不会检查它.

How can I detect support for WebP via Javascript? I'd like to use feature detection rather than browser detection if possible, but I can't find a way to do so. Modernizr (www.modernizr.com) doesn't check for it.

推荐答案

这是我的解决方案 - 大约需要 6 毫秒，我认为 WebP 只是现代浏览器的一项功能.使用不同的方法使用 canvas.toDataUrl() 函数而不是图像来检测特征:

This is my solution - is taking around 6ms and I'm considering WebP is only a feature for a modern browser. Uses a different approach using canvas.toDataUrl() function instead of image as the way to detect the feature:

function support_format_webp()
{
 var elem = document.createElement('canvas');

 if (!!(elem.getContext && elem.getContext('2d')))
 {
  // was able or not to get WebP representation
  return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
 }
 else
 {
  // very old browser like IE 8, canvas not supported
  return false;
 }
}

这篇关于检测 WebP 支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！