微信小程序图片压缩功能的实现方法 :1、在 wx.chooseImage 接口选择相机图片。2、在 wx.getImageInfo 接口获取图片信息。3、计算压缩比例和最终图片的长宽。4、创建 canvas 绘制最终图片。5、在 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径。
具体操作步骤：
1、通过 wx.chooseImage 接口选择相机图片。
2、通过 wx.getImageInfo 接口获取图片信息（长宽，类型）。
3、 计算压缩比例和最终图片的长宽。
4、创建 canvas 绘图上下文，绘制最终图片。
5. 通过 wx.canvasToTempFilePath 接口将画布内容导出为图片并获取图片路径。
代码实现如下所示：
wxml 文件
云服务器
物理服务器
虚拟主机
跨境电商服务器<canvas canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;position: absolute;left:-1000px;top:-1000px;"></canvas>js 文件
data:{ cWidth: 0; cHeight : 0;}
data:{ cWidth: 0; cHeight : 0;}</pre>
<pre>
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)
},
})
}
})
辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
推荐阅读： 微信小程序怎么实现电子签名