小程序 上传图片并压缩

前段时间写过一次h5利用canvas压缩图片的方法，本以为小程序压缩也大同小异，结果不慎掉入坑中爬了好久，这里以uniapp 为例总结一下：
canvas压缩多张图片（一）
canvas压缩多张图片（二）

上传图片 chooseImage

这里要和h5利用input 上传不同，这里需要利用chooseImage上传图片

uni.chooseImage({
	count: 9,
	sourceType: ['album','camera'],
	sizeType: ['compressed'],
	success(res) {
		if(res.errMsg =='chooseImage:ok'){
			that.urlTobase64Fn(res.tempFilePaths)
		}
	}
})

遍历图片数据，进行压缩处理 ,记得要加 id 和 this

async urlTobase64Fn (arr){
	for(let i=0;i<arr.length;i++){
		//这里很重要  canvasId  this
		let base64=await urlTobase64(arr[i],"canvasId",this);
		this.imgArr.push(base64)
	}
},

<canvas id="canvasId"  class="canvasId" canvas-id="canvasId" ></canvas>
.canvasId{
	position: absolute;
	top:-9999rpx;
	left: -9999rpx;
	z-index: 0;
	width: 690rpx;
	height: 690rpx;
}

对URL进行处理 urlTobase64 (这是自定义的方法)

//base64
urlTobase64 = async (fileObj,_this)=>{
	
	//截取文件类型，转换为base64
	let type=fileObj.type || fileObj.path.substring(fileObj.path.lastIndexOf('.')+1);

	let base64  = await getFileSystemManagerFn({
		path:fileObj.path,
		type
	});
	
	base64 = base64.replace(/[\r\n]/g, "");
	
	// console.log(base64,'base')
	
	//如果是视频
	if(type =='mp4'){
		console.log('是视频，直接输出base64')
		//如果上传不是获取视频，则返回空
		return fileObj.fileType =='video'?base64 : ''
	}
	
	let imgSize = await getBase64SizeFn(base64);
	console.log(imgSize,'是图片，判断图片大小');
	//自定义图片大小限制、默认为 200kb
	fileObj.limitNum = fileObj.limitNum ||  1024 *0.2;
	if(imgSize >fileObj.limitNum && type !='gif'){
		console.log(imgSize,'需要压缩')
		let imgInfo = await getImageInfoFn (fileObj.path);
		fileObj.canvasId = fileObj.canvasId || 'canvasId';
		
		return  await convertImgToBase64Fn({
			...fileObj,
			oldH : imgInfo.height,
			oldW : imgInfo.width,
			// path : base64, //用微信临时地址，不要用base64  这里很重要，千万不要打开
			type : imgInfo.type
		},_this);
	} else {
		console.log(imgSize,'可以直接使用');
		//在限制大小之下，直接返回base64值
		return base64
	}
},
 //canvas  压缩
convertImgToBase64Fn = async (obj,_this) =>{ 
  obj.minW     = obj.minW || 750,
  obj.minH     = obj.minH || 1334;
  obj.num 	   = obj.num || 1;
  var cvsw,cvsh;
  
  //横向 图
  if(obj.oldW > obj.oldH){
    cvsh = obj.oldH > obj.minH ? obj.minH : obj.oldH;
    cvsw = cvsh / obj.oldH * obj.oldW
  } //纵向图
  else if(obj.oldW < obj.oldH){
    cvsw = obj.oldW > obj.minW ? obj.minW : obj.oldW;
    cvsh = cvsw / obj.oldW * obj.oldH
  } //正方形
  else if(obj.oldW == obj.oldH && obj.oldW > obj.minW){
    cvsw = obj.minW;
    cvsh = obj.minH;
  } //不必重置宽高
  else {
    cvsw = obj.oldW;
    cvsh = obj.oldH;
  }
  //对宽高 进行取整
  cvsw = parseInt(cvsw);
  cvsh = parseInt(cvsh);
  
  //设置canvas画布大小
  
  console.log(cvsw,cvsh,'设置canvas画布大小');
  
  _this.windowInfo ={
  	width:cvsw,
  	height:cvsh
  }
  
  let dataURL = await canvasToTempFilePathFn({...obj,cvsw,cvsh},_this);
  console.log(dataURL.substring(0,50),'输出压缩后最终地址')
  return dataURL;
},
//将base64 判断大小
getBase64SizeFn =(base64url) =>{
  //获取base64图片大小，返回KB数字
  var strLength =base64url.length;
  var fileLength = parseInt(strLength - (strLength / 8) * 2);
  // 由字节转换为KB
  var size = "";
  size = (fileLength / 1024).toFixed(2);
  return parseInt(size) *1;
},
//获取图片信息
getImageInfoFn = (url)=>{
	console.log(url,'去获取图片信息')
	return new Promise((resolve)=>{
		wx.getImageInfo({
			src: url,
			success:  (res)=> {
				console.log(res.path,'图片信息')
				resolve(res)
			}
		});
	})
},
//绘制画布，并返回图片地址
canvasToTempFilePathFn =(obj,_this)=>{
	return new Promise((resolve,reject)=>{
		const ctx = uni.createCanvasContext(obj.canvasId,_this);
		console.log(obj.num,obj.type,'压缩开始')
		ctx.drawImage(obj.path, 0, 0, obj.cvsw, obj.cvsh);
		ctx.draw(false, setTimeout(()=>{
			uni.canvasToTempFilePath({
				canvasId	:obj.canvasId,
				fileType	:obj.type,
				quality		:obj.num,
				width		:obj.cvsw,
				height		:obj.cvsh,
				destWidth	:obj.cvsw,
				destHeight	:obj.cvsh,
				success: async (res1) =>{
					//转换为base64
					console.log('去将压缩后的地址转base64')
					let base64  = await getFileSystemManagerFn({
						path:res1.tempFilePath,
						type:obj.type
					});
					base64 = base64.replace(/[\r\n]/g, "");
					console.log('去后去压缩后的base64大小')
					let imgSize = getBase64SizeFn(base64);
					
					if( imgSize >= obj.limitNum  && obj.num >0.6){
					  console.log(imgSize,'图片过大，继续压缩')
					  obj.num = obj.num  - 0.2 ;
					  obj.num = obj.num.toFixed(2) *1;
					  //重置图片格式
					  if(obj.type =='png' || obj.type =='PNG'){
					  	obj.type  ='png'
					  } else{
					  	obj.type  ='jpg'
					  }
					  //继续压缩
					  canvasToTempFilePathFn({...obj},_this).then((res2)=>{
						resolve(res2)
					  });
					} else{
						console.log(imgSize,'最终压缩后图片大小')
						resolve(base64)
					}
				}, 
				fail: function (e) {
					console.log('失败')
					reject(e)
				}
			},_this)
		},200));
	})
},
//将图片转 base64
getFileSystemManagerFn =(obj)=>{
	// console.log(obj.path,'图片地址')
	return new Promise(async (resolve,reject)=>{
		let path = obj.path;
		//微信图片，先去下载
		if(path.indexOf('https://wx.qlogo.cn') >=0){
			path = await downloadFileFn(path);
		}
		// console.log(path,'地址')

		wx.getFileSystemManager().readFile({
			filePath:path,
			encoding:'base64',
			success: async res=>{ 
				console.log(obj.type,'图片类型')
				let base64=`data:image/${obj.type};base64,${res.data}`;
				resolve(base64)
			}
		});
	})
},
//将图片下载到本地
downloadFileFn =(url)=>{
	return new Promise ((resolve,reject)=>{
		wx.downloadFile({
			url,
			success(res) {
			  resolve(res.tempFilePath)
			},
			fail:err=>{
				reject(err)
			}
		})
	})
}