我們都知道裁蚁，WebP 是 Google 推出的 WebP 圖片格式，它是一種支持有損壓縮和無損壓縮的圖片文件格式继准，根據(jù)Google測試枉证，相同的圖片，WebP 格式的圖片均能比 PNG移必，JPG 格式的圖片節(jié)約不少體積室谚，但是其兼容性不是很好，如下：
因此我們需要做一些兼容處理崔泵，那么如何判斷瀏覽器支持 webp 呢秒赤？下面有幾種方法可供參考。
方法一
使用 canvas 的 toDataURL 進(jìn)行判斷
toDataURL方法在MDN解釋如下：
HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 憎瘸∪肜海可以使用 type 參數(shù)其類型，默認(rèn)為 PNG 格式幌甘。圖片的分辨率為96dpi潮售。
- 如果畫布的高度或?qū)挾仁?，那么會返回字符串“data:,”锅风。
- 如果傳入的類型非“image/png”酥诽，但是返回的值以“data:image/png”開頭，那么該傳入的類型是不支持的皱埠。
- Chrome支持“image/webp”類型肮帐。
toDataURL方法將圖片轉(zhuǎn)化為包含dataURI的DOMString，通過 base64 編碼前面的圖片類型值是image/webp進(jìn)行判斷边器。
比如在谷歌瀏覽器使用toDataURL方法轉(zhuǎn)成image/webp：
在 Safari 瀏覽器使用toDataURL方法轉(zhuǎn)成image/webp：
可以發(fā)現(xiàn)在不支持 webp 的瀏覽器進(jìn)行toDataURL训枢，得到的圖片類型并不是 webp，因此我們可以通過這個進(jìn)行判斷饰抒。
實(shí)現(xiàn)方法：
var isSupportWebp = function () {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch(err) {
return false;
}
}
isSupportWebp()
方法二
在服務(wù)端根據(jù)請求header信息判斷瀏覽器是否支持webp
谷歌瀏覽器上請求圖片 header是這樣的：
IE 瀏覽器請求圖片 header是這樣的：
在圖片請求發(fā)出的時候，Request Headers 里有 Accept诀黍，服務(wù)端可以根據(jù)Accept 里面是否有 image/webp 進(jìn)行判斷袋坑。
方法三
通過加載一張 webp 圖片進(jìn)行判斷
const supportsWebp = ({ createImageBitmap, Image }) => {
if (!createImageBitmap || !Image) return Promise.resolve(false);
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
createImageBitmap(image)
.then(() => {
resolve(true);
})
.catch(() => {
resolve(false);
});
};
image.onerror = () => {
resolve(false);
};
image.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
});
};
const webpIsSupported = () => {
let memo = null;
return () => {
if (!memo) {
memo = supportsWebp(window);
}
return memo;
};
};
webpIsSupported()().then(res => {
console.log("是否支持 webp", res)
}).catch(err => {
console.log(err)
})
此方法會加載一張 1x1 的白色的正方形背景圖，用來測試瀏覽器是否支持 webp。
在 Google 測試代碼：
在 Firefox 測試代碼：
在 Safari 測試代碼：
Google官方文檔是這樣處理的（先加載一個WebP圖片枣宫，如果能獲取到圖片的寬度和高度婆誓，就說明是支持WebP的，反之則不支持）：
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
var result = (img.width > 0) && (img.height > 0);
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
