当前位置:首页 > webp

webp

发布于 2018-08-27 阅读 672 次 webp

判断浏览器支持webP

方法一:

  1. function checkWebp() {
  2. try{
  3. return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
  4. }catch(err) {
  5. return false;
  6. }
  7. }
  8. 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.
方法二:

  1. var d = document;
  2. var check = function() {
  3. var supportWebp;
  4. try {
  5. var ele = d.createElement('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. }

1.若使用场景是浏览器,可以:

JavaScript 能力检测,对支持 WebP 的用户输出 WebP 图片
使用 WebP 支持插件:WebPJS

2.若使用场景是 App,可以:
Android 4.0 以下 WebP 解析库(链接
iOS WebP 解析库(链接

相关文章