javascript - 检测 WebP 支持

Question

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

Answer 1

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

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