1. ホーム
  2. javascript

[解決済み] WebP サポートの検出

2022-05-15 13:48:21

質問

Javascript を使用して WebP のサポートを検出するにはどうしたらよいでしょうか。できれば、ブラウザ検出ではなく、機能検出を使用したいのですが、その方法が見つかりません。Modernizr ( www.modernizr.com )ではチェックされない。

どのように解決するのですか?

これは私の解決策です。約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;
 }
}