微信小程序使用wx.chooseImage上传图片时进行压缩，并添加时间水印

在微信小程序的开发过程，经常会使用自带的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)
                that.addTimeWatermark(res.tempFilePaths[0])

            },
        })
    },

// 添加时间水印
    addTimeWatermark: function (imagePath) {
        var that = this
        console.log('addTimeWatermark=' + imagePath)
        var ctx = wx.createCanvasContext('mycanvas');
        this.roundRectColor(ctx, 0, 0, 375, 667, 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;
                    that.canvasImage(tempFilePath, 0) 
                },
                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();
    },
//压缩图片1(加了水印后压缩)
    canvasImage:function(imgUrl,index){
        console.log('canvasImage111压缩图片')
       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',
                       fileType: 'jpg', // 指定输出格式为JPG
                       quality:0.5,//压缩比，必需设置输出格式为JPG才能有效
                       success: (res) => {
                           wx.hideLoading()
                           console.log("压缩后的临时路径：", res.tempFilePath)                          
                            that.data.images.push(res.tempFilePath);
                            console.log(that.data.images)
                            that.setData({
                                imagePath: res.tempFilePath,
                                images: that.data.images
                            });
                       },
                       fail: (err) => {
                           wx.hideLoading()
                           console.error(err)
                       }
                   }, this)
               }, 400); //延迟400毫秒为了等canvas画上
           }
       })
   },  

//上传图片
app.util.uploadImg(that.callBackClose, app, that.data.pid, that.data.images, that.data.tempNum, 'check')