客户端通过 JS 来检测是否支持 webp 图片格式的方法有很多种，以免遗忘，在这里做一个总结。
通过加载 webp 图片的方式检测客户端是否支持 webp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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];
}
|
这种方式检测地比较全面，可以检测客户端对多个 webp 压缩级别的支持度测试
通过 canvas 的方式检测是否支持 webp
1 |
document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
|
通过创建 object 的方式检测是否支持 webp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var d = document;
var check = function() {
var supportWebp;
try {
var ele = d.createElement('object');
ele.type = 'image/webp';
ele.innerHTML = '!';
d.body.appendChild(ele);
supportWebp = !ele.offsetWidth;
d.body.removeChild(ele);
}catch (err) {
supportWebp = false;
}
return supportWebp;
}
|
这种方式与上面两种方式比较起来会显得奇葩一些，在支持 webp 的浏览器上，此 obj 是不可见的，也就是宽度为 0，可以根据这点来判断浏览器对于 webp 的支持度