网页webp转非webp的jpg gif png 图片

webp 谷歌提出的一种图片格式。
支持动图： gif
静图： png jpg

 

网页 webp / jpg / gif / png 图片提取。

已在微信、淘宝、京东、一号店上测试通过。

如果电脑上有 chrome 内核浏览器的话是支持 webp 的，没有的话就无法查找这种格式了。但大多数网站其实都提供了相应 jpg ，一般只要改下文件名就可以了。

总结下主要方式，各个网站的 webp 图：

淘宝的：

https://img.alicdn.com/tps/i2/TB1XN66MpXXXXXyXFXXj64lTXXX-200-200.jpg_100x100q90.jpg_.webp

 

有不同尺寸，甚至格式。如上条链接中有200-200.jpg和100x100q90.jpg的图。从下划线_阶段可得到不同尺寸的图。

 

微信的：

http://mmbiz.qpic.cn/mmbiz_gif/5jiagcxMqZxibYXxGUXNf8gRCiapA1W8gQkGIdB7tLYYXLf07nnZb594M3Y8XLWIITEgvhhWKrDrrEETAvTTzbuzA/0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

很明显：wx_fmt=gif 里的 gif 表示了图片的源格式是gif。

 

其他的：

一般都是把后缀改为源格式即可。

 

 

v0.1

//webp转jpg保存器v0.1 by 小文 2016-12-26
//可能出来的格式， jpeg 没有列出。
var jpg='.jpg'
var png='.png'
var gif='.gif'
var webp=$$("[src$='.webp']"); //所有 webp 对象
var suc=0; //成功提取到的数量
var itg=''; //目标
var exe=''; //当前处理的格式
var oth=''; //没有提取的格式
var msg=''; //输出信息
var sty='style="width:50px;height:50px;padding:4px;border:1px dashed #ccc"'; //附加样式

for(var i=0;i<webp.length;i++){
  var src=webp[i].src
  if(src.lastIndexOf(jpg)!=-1){
    exe=jpg; suc++;
  }else if(src.lastIndexOf(png)!=-1){
    exe=png; suc++;
  }else if(src.lastIndexOf(gif)!=-1){
    exe=gif; suc++;
  }else{
    oth+='<img '+sty+ 'src="'+src+'">';
  }
  if(src.lastIndexOf(jpg)!=-1||src.lastIndexOf(png)!=-1||src.lastIndexOf(gif)!=-1){
    src=src.substring(0,src.lastIndexOf(exe)+4);
    itg+='<img '+sty+ 'src="'+src+'">';
  }
}

if(webp.length==suc){
  msg='<hr>已全部提取：<hr>'+itg+'<hr>'
}else{
  msg='<hr>已提取：<hr>'+itg+'<hr>未提取：<hr>'+oth
};
msg="<hr>总数："+webp.length+"<br>成功："+suc+"<br>失败："+(webp.length-suc)+msg

window.open().document.write(msg)

 

 v0.3

更新了下，支持微信及直接改后缀如一号店方式：

//webp转jpg保存器v0.3 by 小文 2016-12-26
//可能出来的格式， jpeg 没有列出。
var jpg='.jpg'
var png='.png'
var gif='.gif'
var webp=$$("[src*='&tp=webp']")[0] ? $$("[src*='&tp=webp']") : $$("[src$='.webp']"); //所有 webp 对象
var suc=0; //成功提取到的数量
var itg=''; //目标
var exe=''; //当前处理的格式
var oth=''; //没有提取的格式
var oth2=''; //特殊情况，直接修改后缀
var msg=''; //输出信息
var sty='style="width:50px;height:50px;padding:4px;border:1px dashed #ccc"'; //附加样式

for(var i=0;i<webp.length;i++){
  var src=webp[i].src
  //淘宝
  if(src.lastIndexOf(jpg)!=-1){
    exe=jpg;
  }else if(src.lastIndexOf(png)!=-1){
    exe=png;
  }else if(src.lastIndexOf(gif)!=-1){
    exe=gif;
  }else{
    oth+='<img '+sty+ 'src="'+src+'">';
    //一号店等特殊情况，直接改后缀
    oth2+='<img onerror="console.log(this);this.style.display=\'none\'"'+sty+ 'src="'+src.substring(0,src.lastIndexOf('.webp'))+'.jpg'+'">';
    oth2+='<img onerror="console.log(this);this.style.display=\'none\'"'+sty+ 'src="'+src.substring(0,src.lastIndexOf('.webp'))+'.gif'+'">';
    oth2+='<img onerror="console.log(this);this.style.display=\'none\'"'+sty+ 'src="'+src.substring(0,src.lastIndexOf('.webp'))+'.png'+'">';
  }
  var b1=Boolean(src.lastIndexOf(jpg)!=-1||src.lastIndexOf(png)!=-1||src.lastIndexOf(gif)!=-1)
  if(b1){
    src=src.substring(0,src.lastIndexOf(exe)+4);
    itg+='<img '+sty+ 'src="'+src+'">';
    suc++;
  }else if($$("[src*='&tp=webp']")[0]){
    //腾讯
    itg+='<img '+sty+ 'src="'+webp[i].src.substring(0,webp[i].src.lastIndexOf('&tp=webp'))+'">';suc++
  }
}

if(webp.length==suc){
  msg='<hr>已全部提取：<hr>'+itg+'<hr>'
}else{
  msg='<hr>已提取：<hr>'+itg+'<hr>未提取：<hr>'+oth
};
msg="总数："+webp.length+"<br>成功："+suc+"<br>失败："+(webp.length-suc)+msg+"<hr>特殊提取：<hr>"+oth2

window.open().document.write(msg)