微信小程序圖片壓縮有三種方法，一種是使用官方提供的接口 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
