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;
	 }
}