微信小程序图片压缩有三种方法，一种是使用官方提供的接口 wx.compressImage(Object object)；一种是通过压缩图片的大小，利用canvas重绘来得到压缩图片；最后一种安装第三方图片压缩包。
由于第一种方法网上很多人说压缩不明显或者失效，所以选择使用canvas重绘来实现图片压缩。同时，该种方法可以控制图片的最大尺寸，保持上传图片大小尺寸相差不多。在我们的学生节晚会小程序中，屏幕显示图片会比较美观一致。
具体步骤：
1. 通过 wx.chooseImage 接口选择相机图片
2. 通过 wx.getImageInfo 接口获取图片信息（长宽，类型）
3. 计算压缩比例和最终图片的长宽
- 创建 canvas 绘图上下文，绘制最终图片
5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径
代码实现：
wxml 文件
在文件末尾插入 canvas 组件，通过设置left和top值确保图片不会显示在可视范围内。
一定要设置 canvas-id，这是canvas绘图和导出图片必备的属性。
<canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>
js 文件
设置与页面绑定的数据：canvas的大小，也是压缩后图片的大小
data:{ cWidth: 0; cHeight : 0;}
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 指定只能为压缩图，首先进行一次默认压缩
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (photo) {
//-----返回选定照片的本地文件路径列表，获取照片信息-----------
wx.getImageInfo({
src: photo.tempFilePaths[0],
success: function(res){
//---------利用canvas压缩图片--------------
var ratio = 2;
var canvasWidth = res.width //图片原始长宽
var canvasHeight = res.height
while (canvasWidth > 400 || canvasHeight > 400){// 保证宽高在400以内
canvasWidth = Math.trunc(res.width / ratio)
canvasHeight = Math.trunc(res.height / ratio)
ratio++;
}
that.setData({
cWidth: canvasWidth,
cHeight: canvasHeight
})
//----------绘制图形并取出图片路径--------------
var ctx = wx.createCanvasContext('canvas')
ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight)
ctx.draw(false, setTimeout(function(){
wx.canvasToTempFilePath({
canvasId: 'canvas',
destWidth: canvasWidth,
destHeight: canvasHeight,
success: function (res) {
console.log(res.tempFilePath)//最终图片路径
},
fail: function (res) {
console.log(res.errMsg)
}
})
},100)) //留一定的时间绘制canvas
fail: function(res){
console.log(res.errMsg)
},
})
}
})
注意点
1. 将画布内容导出为图片时，指定destWidth和destHeight为压缩后图片的大小。这里遇到过玄学bug，不指定的话，有时候图片不会压缩到规定的大小。
wx.canvasToTempFilePath 可以选择导出类型为png或jpg
wx.canvasToTempFilePath 可以设置图片导出的quality
