☰

WebPサポートの検出 質問する

tag-icon • tag-icon javascript html image webp
WebPサポートの検出 質問する

Javascript 経由で WebP のサポートを検出するにはどうすればよいでしょうか? 可能であればブラウザ検出ではなく機能検出を使用したいのですが、その方法が見つかりません。Modernizr (翻訳:) はそれをチェックしません。

ベストアンサー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;
 }
}

おすすめ記事