利用canvas图片压缩 转base64

由于业务需求 需要上传图片 但是一般相机拍照图片都比较大 10m左右  导致图片上传不上去，接口报错
索性将图片压缩一下。

话不多说直接上代码

file 图片地址（本地地址 链接我还没试过）
size 期望压缩大小

// 选择的file 图片地址  size 压缩目标大小kb
compressImage(file,size) {
				let self = this;
				return new Promise((resolve, reject) => {
					var quality = 0.5; //压缩系数0-1之间 
					var image = new Image();
					image.src = file; 
					image.onload = function() {
						// 创建canvas
						var canvas = document.createElement('canvas');
						// 获取上下文
						var ctx = canvas.getContext('2d'); 
						canvas.width = this.width;
						canvas.height = this.height; 
						ctx.clearRect(0, 0, canvas.width, canvas.height);
						ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
						var base64Data = canvas.toDataURL("image/jpeg",1); //压缩语句
						if( base64Data.length / 1024 > size ){
							//如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间， 
							while (base64Data.length / 1024 > size) {
								quality -= 0.01;
								base64Data = canvas.toDataURL("image/jpeg", quality);
							} 
						}  
						console.log("文件大小:" + base64Data.length / 1024,'kb左右'); 
						resolve(base64Data)
					}
				})
			},

调用（这个过程可能需要1 ~ 2秒时间 可以加一个Loading缓解一下尴尬）

this.compressImage(res.tempFilePaths[0],400).then(res=>{
	console.log('最终结果',res)
	this.iconBase64 = res
	// 拿到结果 取消加载
})