網頁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)