检测浏览器是否支持webp格式

 方法一：

1. function checkWebp() {
2. try{
3. return(document.createElement_x('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
4. }catch(err) {
5. return false;
6. }
7. }
8. console.log(checkWebp()); // true or false



 原理：

HTMLCanvasElement.toDataURL()方法返回一个数据URI包含一个表示的图像格式指定的类型参数(默认为PNG)。返回的图像是在一个96 dpi的分辨率。

如果画布的高度或宽度为0,返回字符串“data：”。
如果请求类型不是image/ png图像,但返回的值以 data:image/ png,这个请求类性就不支持。
Chrome也支持image/ webp图像类型。

 方法二：

1. var d = document;
2. var check = function() {
3. var supportWebp;
4. try {
5. var ele = d.createElement_x('object');
6. ele.type = 'image/webp';
7. ele.innerHTML = '!';
8. d.body.appendChild(ele);
9. //奇妙所在,如果浏览器支持webp,那么这个object是不可见的(offsetWidth为0),
10. //否则就会显示出来,有可视宽度.
11. supportWebp = !ele.offsetWidth;
12. d.body.removeChild(ele);
13. }catch (err) {
14. supportWebp = false;
15. }
16. return supportWebp;
17. }