WebP探索

不同场景下WebP的使用方案总结：
 
  • App：Android4.0以上提供原生支持，其他版本使用官方提供的解析库（Android、iOS）；
 
  • 浏览器：JS能力检测，对支持 WebP 的用户输出 WebP 图片；使用WebpJS检测浏览器或webview是否支持，此插件我自己测试只有win下chrome能用，其他均存在问题
 
 
  • 手淘方案：目前手淘Android和iOS App中是支持的WebP的，采用解析库。iOS中webview本身是不支持WebP格式的，手淘中的实现是交给图片库来完成这部分工作（手淘是获取WebP格式文件然后转码成jpg给webview，我们现在是先进性判断再加载对应的图片）
 
  • 案例实战：
 1 ;(function(doc){
 2     //判断是否支持WebP，测试了iPhone5s和坚果手机下的不同浏览器该判断方法可行
 3     function checkWebp(){
 4         try{
 5             return (doc.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
 6             //返回的是一串Base64编码的URL
 7             //data:image/webp;base64,UklGRrgAAABXRUJQVlA4WAoAAAAQAAAAKwEAlQAAQUxQSBIAAAAB…kPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99qwAAP7/1gAAAAAAAAAA
 8         }
 9         catch(err){
10             return false;
11         }
12     }
13     //获取class不依赖zepto
14     function getByClass(parent,cls){
15         if(parent.getElementsByClassName){
16             return parent.getElementsByClassName(cls);
17         }
18         else{
19             var res=[];
20             var reg=new RegExp(" "+cls+" ","i");
21             var ele=parent.getElementsByTagName("*");
22             for(var i=0;i<ele.length;i++){
23                 if(reg.test(" "+ele[i].className+" ")){
24                     res.push(ele[i]);
25                 }
26             }
27             return res;
28         }
29     }
30     //改变带webp class的图片路径
31     function ChangeImg(sClass){
32         this.aImg = getByClass(doc,"webp");
33         this.oBar = checkWebp();
34     }
35     ChangeImg.prototype.test = function(){
36         //默认给html根节点加.normal
37         doc.documentElement.className = "normal";
38         if(this.oBar){
39             //支持webp则给html根节点加上support类名
40             doc.documentElement.className = "support";
41             for(var i = 0;i < this.aImg.length;i ++){
42                 if(this.aImg[i].getAttribute("data-src")){
43                     var dataSrc = this.aImg[i].getAttribute("data-src");
44                     //获取images目录下图片的名字
45                     var imgSrc = dataSrc.split("?")[0].split(".")[0].substring(6);
46                     //images换成webp
47                     var imgStr = "webp" + imgSrc + ".webp";
48                     this.aImg[i].setAttribute("data-src",imgStr);
49                 }
50             }
51         }
52     };
53     //通过webp class来判断是否需要webp格式图片
54     new ChangeImg("webp").test();
55 
56 })(document);
  • 改进点：fis3下暂未发现有实时监听转换webp格式图片的插件，gulp有，目前可以通过智图网页版或客户端进行批量转换，一步到位；iOS下App不支持WebP，需要iOS同学进行相关的处理；其他一些问题等待大家去探索发现...

DEMO下载

参考：
posted @ 2016-09-07 15:22  DuangDang  阅读(309)  评论(0)  编辑  收藏  举报