利用 Javascript 偵測瀏覽器是否支援 WebP

現今，大部分的瀏覽器都支援 WebP 圖片格式。在某些情況下，我們可能有需要檢查使用者的瀏覽器是否支援 WebP 圖片格式。

使用 Javascript 偵測

在這裡，我們將展示一個使用 JavaScript 在客戶端偵測是否支援 WebP 的簡單方法。我們來看看 JavaScript 的程式碼。

<script>
	function isWebpSupported(callback) {
		var webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
		fetch(webpData)
			.then(response => response.blob())
			.then(blob => callback(blob.type === 'image/webp'))
			.catch(() => callback(false));
	}

	function handleWebpSupport(isSupported) {
		if (isSupported) {
			console.log('WebP format is supported!');
		} else {
			console.log('WebP format is not supported.');
		}
	}

	isWebpSupported(handleWebpSupport);
</script>

在 isWebpSupported() 函式中，先設定一個 webpData 變數，並儲存一個以 Base64 編碼的小型 WebP 圖像。跟住會以 fetch 嘗試讀取，它會回傳 blob.type，我們可以檢查它是否為 WebP 圖像格式。另外還會處理其他情況，並使用 false 參數進行回呼。

而第二個函式 handleWebpSupport() 作為回呼用來顯示偵測結果。

使用這段簡單的 JavaScript 代碼，我們就可以判定瀏覽器是否支援 WebP 圖片格式。