微信上传图片后，将图片按比例缩放后，绘制在canvas画布上面，即可实现上传图片压缩效果，具体代码如下:
1.wxml文件中：
<canvas id="attendCanvasId" canvas-id="attendCanvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:fixed;left:-1000px;top:-2000px;"></canvas>2.微信小程序js代码：
Page({
data: {
canvasWidth:0,//初始化画布宽度
canvasHeight:0,//初始化画布高度
},
//选择图片
chooseImage(){
wx.chooseImage({
count:1,//演示限制只允许选择一张图片
sizeType: ['compressed'], //我这里指定上传压缩图
sourceType: ['album','camera'], //允许从相册选择上传、拍照上传
success: (res) => {
console.log(res)
let tempFiles = res.tempFiles;
//进行压缩
this.imageShrink(tempFiles[0]['path']);
}
})
},
//压缩图片
imageShrink(src_img){
let ctx = '';
//#attendCanvasId是画布canvas的id
wx.createSelectorQuery()
.select("#attendCanvasId")
.context((res)=>{
ctx = res.context;
//获取图片信息，做这一步
wx.getImageInfo({
src: src_img,
success: (ret)=>{
let ratio = 2;//压缩比，值越高压缩的越小
let canvasWidth = ret.width; //图片原始宽度
let canvasHeight = ret.height;//图片原始高度
//保证图片宽高在400以内
if (canvasWidth > 400 || canvasHeight > 400){
canvasWidth = Math.trunc(ret.width / ratio)
canvasHeight = Math.trunc(ret.height / ratio)
}
//赋值画布的宽度、高度
this.setData({
canvasWidth:canvasWidth,
canvasHeight:canvasHeight
});
//在画布绘制图片
ctx.drawImage(src_img, 0, 0,canvasWidth,canvasHeight);
ctx.draw();
//留一定的时间绘制canvas
setTimeout(()=>{
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
fileType:'jpg',//上传图片格式，jpg比较小
success:(result)=> {
//调用上传图片方法
this.uploadimage(result.tempFilePath);
},
error:(err)=>{},
complete: (e)=>{}
});
},300);
}
})
}).exec();
},
//上传图片,src_img表示上传图片地址
uploadimage(src_img){
//开始上传以及上传返回值
wx.uploadFile({
url: "接口地址，如https://www.XXX.com/XXX",
filePath: src_img,//图片地址
name: '上传图片接口的参数名称',
formData: {//请求的额外参数
'user': 'test'
},
success (res){
let result = JSON.parse(res.data);//返回的结果是String类型，json转换
}
});
}
})
