(转)让浏览器支持Webp

转载自：https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral

转换工具

智图 isparta

判断浏览器支持webP

方法一：

function checkWebp() { ???try{ ???????return (document.createElement(‘canvas‘).toDataURL(‘image/webp‘).indexOf(‘data:image/webp‘) == 0); ???}catch(err) { ???????return ?false; ???}}console.log(checkWebp()); ??// true or false

console.log(checkWebp()); // true or false
方法是在其他地方上看到的，我用trycatch改写了一下

原理：

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

If the height or width of the canvas is 0, the string "data:," is returned.
If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
Chrome 支持 image/webp.
方法二：

var d = document;var check = function() { ???var supportWebp; ???try { ???????var ele = d.createElement(‘object‘); ???????ele.type = ‘image/webp‘; ???????ele.innerHTML = ‘!‘; ???????d.body.appendChild(ele); ???????//奇妙所在,如果浏览器支持webp,那么这个object是不可见的(offsetWidth为0), ???????//否则就会显示出来,有可视宽度. ???????supportWebp = !ele.offsetWidth; ???????d.body.removeChild(ele); ???}catch (err) { ???????supportWebp = false; ???} ???return supportWebp;}

1.若使用场景是浏览器，可以：
JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片
使用 WebP 支持插件：WebPJS

2.若使用场景是 App，可以：
Android 4.0 以下 WebP 解析库（链接）
iOS WebP 解析库（链接）

(转)让浏览器支持Webp

原文地址：http://www.cnblogs.com/youzhuxiaoyao/p/7809826.html