vue項目下一些瀏覽器不支持圖片的.webp格式的處理

1. 什麼是webp格式：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器寬帶資源和數據空間。WebP既支持有損壓縮也支持無損壓縮。相較編碼JPEG文件，編碼同樣質量的WebP文件需要佔用更多的計算資源。與JPEG相同，WebP是一種有損壓縮。但谷歌表示，這種格式的主要優勢在於高效率。他們發現，“在質量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。谷歌瀏覽器已經支持webp格式，Opera在版本號Opera11.10後也增加了支持，然而火狐和ie暫時還不支持webp格式，可以採用flash插件來顯示webp，當然這樣會耗費一些性能。

美中不足的是，WebP格式圖像的編碼時間“比JPEG格式圖像長8倍”。

2. 在vue項目中處理.webp格式的圖片：

data(){
	return{
		singerlist:[],
		isWebpView:false, //瀏覽器是否支持webp格式渲染
	}
},
created(){
	this.init()	
},
methods:{
	init(){
		this._getSingerList()
		 //檢查當前瀏覽器是不是支持webp,lossy是
		this.checkWebpFeature('lossy', (feature,result)=>{
		         	this.isWebpView = result;
		 })
	},
	_getSingerList(){	
		sendGetAxios("/api/singer",(res)=>{				
		    var arr=res.singerList.data.singerlist;
			this.amendStr(arr)
		})				
	},
	checkWebpFeature(feature, callback) {  //判斷瀏覽器是否支持webp格式圖片
		        let kTestImages = { //lossy:“有損”,lossless:“無損”,alpha:“α”或animation:“動畫”。
		          lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
		          lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
		          alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
		          animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
		        };
		        let img = new Image();
		        img.onload = function () {
		          let result = (img.width > 0) && (img.height > 0);
		          callback(feature, result);
		        };
		        img.onerror = function () {
		          callback(feature, false);
		        };
		        img.src = "data:image/webp;base64," + kTestImages[feature];
		    },
	 amendStr(arr){  //根據瀏覽器是否支持webp對圖片webp格式進行轉換
		    	if(arr.length<=0){return}
		    	let arrSrc = [];
		    	arr.forEach((item,index)=>{		    		
		    		if(!this.isWebpView){ //當前瀏覽器不支持webp渲染，將圖片路徑.webp後綴改成.jpg，有時候改成.png也無法顯示，所有改成.jpg.
			           item.singer_pic=item.singer_pic.replace(".webp",".jpg")
			         }
		    	})
		    	this.singerlist=arr;
	 }
}