[解決済み] 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;
}
}
関連
-
[解決済み】JavaScriptで「無効な日付」のDateインスタンスを検出する
-
[解決済み] デバイスがiOSであるかどうかを検出する
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] Node.jsのmodule.exportsの目的と使い方を教えてください。
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み] event.targetを使用して、要素の親要素をターゲットにすることができますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] express.json()とexpress.urlencoded()とは何ですか?
-
[解決済み] Angular 2 パスが存在しない場合に404や他のパスにリダイレクトする方法 [重複]について
-
[解決済み] event.targetを使用して、要素の親要素をターゲットにすることができますか?
-
[解決済み] Typescript流のMongoose...?
-
[解決済み] WebpackでjQueryを本物のWindowオブジェクトに公開する
-
[解決済み] 料金制限のあるAPIを独自にDogfoodする
-
[解決済み] ネストしたオブジェクトのプロパティを動的に設定する
-
[解決済み] Javascript/jQuery。複数選択で値を設定(選択)する
-
[解決済み] JavaScriptでユーザーのローカルLANのIPアドレスを取得できるか?