在微信小程序的开发过程，经常会使用自带的api(wx.chooseImage)进行图片拍照或选择图片进行上传，有时图片太大，造成上传和下载时过慢，现对图片进行压缩后上传，以下是流程和代码
一、小程序的版本选择了3.2.5，使用其它版本有时不知道错误
二、wxml代码，需要添加canvas
<canvas style="width: {{cwidth}}px;height: {{cheight}}px;position:fixed;top:9999px" canvas-id="mycanvas"></canvas>
三、js代码
1、参数
cwidth:'375',
cheight:'667',
//上传图片时，当前数组下标，用来确认上传第几张图片，上传完一次就+１
tempNum: 0,
// 图片上传参数
filePath: "",
images: [],
count: 1,
2、选择图片wx.chooseImage
// 选择图片
chooseImage: function (e) {
console.log('选择图片chooseImage')
var that = this;
wx.chooseImage({
count: that.data.count, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
console.log('图片大小='+res.tempFiles[0].size)
if(res.tempFiles[0].size>500000){//图片大于500K才进行压缩，压缩后大约400K
that.canvasImage(res.tempFilePaths[0], 0)
} else{
//图片添加水印
that.addTimeWatermark(res.tempFilePaths[0])
}
},
})
},
//压缩图片
canvasImage:function(imgUrl,index){
console.log('canvasImage压缩图片')
wx.showLoading({
title: '照片上传中...',
})
var that = this
wx.getImageInfo({
src: imgUrl,
success(res) {
console.log("路径", res.path)
console.log('获得原始图片大小', res.width, res.height)
var originWidth, originHeight;
originHeight = res.height;
originWidth = res.width;
// 最大尺寸限制 //压缩比例
var maxWidth = originWidth >= originHeight ? 540 : 810,
maxHeight = originWidth >= originHeight ? 810 : 540;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
//等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 要求宽度*(原生图片比例)=新图片尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
console.log("压缩后的图片大小", targetWidth, targetHeight)
var ctx = wx.createCanvasContext('mycanvas');
ctx.clearRect(0, 0, targetWidth, targetHeight);
ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight);
ctx.draw();
//更新canvas大小
that.setData({
cwidth: targetWidth,
cheight: targetHeight
});
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: (res) => {
wx.hideLoading()
console.log("压缩后的临时路径：", res.tempFilePath)
that.addTimeWatermark(res.tempFilePath)
},
fail: (err) => {
wx.hideLoading()
console.error(err)
}
}, this)
}, 400); //延迟400毫秒为了等canvas画上
}
})
},
// 添加时间水印
addTimeWatermark: function (imagePath) {
var that = this
console.log('addTimeWatermark=' + imagePath)
var ctx = wx.createCanvasContext('mycanvas');
this.roundRectColor(ctx, 0, 30, 375, 620, 16);
ctx.drawImage(imagePath, 15, 120, 344, 400);
ctx.save();
// 设置水印文字
const time = app.util.formatTime()
console.log('time=' + time)
ctx.beginPath(); //开始绘制
ctx.setFontSize(22);
ctx.setFillStyle('#DC3545')
ctx.fillText(time, 15, 450); // 根据实际情况调整位置
ctx.draw();
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log('imagePath=' + tempFilePath)
that.data.images.push(tempFilePath);
console.log(that.data.images)
that.setData({
imagePath: tempFilePath,
images: that.data.images
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
roundRectColor: function (context, x, y, w, h, r) { //绘制圆角矩形（纯色填充）
context.save();
context.setFillStyle("#FFFFFF"); //小框
context.setStrokeStyle('#FFFFFF') //大框
// context.setLineJoin('round'); //交点设置成圆角
context.setLineWidth(r);
context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
context.fillRect(x + r, y + r, w - r * 2, h - r);
context.stroke();
context.closePath();
},
//上传图片
app.util.uploadImg(that.callBackClose, app, that.data.pid, that.data.images, that.data.tempNum, 'check')