微信小程序拍照上传加水印

1、上js代码：

 // 压缩图片
  //file图片文件(必选)
  //maxWidth限制宽度(必选)
  //callback压缩完成回调方法(可选)
  compress(file, maxWidth, maxHeight, callback) {    //接收传过来的图片
    var that = this;
    //获取原图片信息
    wx.getImageInfo({
      src: file,
      success: function (res) {
        wx.showLoading({
          title: "正在加载图片",
          mask: true
        })
        var width = res.width, height = res.height;
        if (width > maxWidth) {
          //超出限制宽度
          height = (maxWidth / width) * height;
          width = parseInt(maxWidth);
        }
        if (res.height > maxHeight && maxHeight) {
          //超出限制高度
          var ratio = that.data.thumbHeight / res.height;//计算比例
          width = (maxHeight / height) * width.toFixed(2);
          height = maxHeight.toFixed(2);
        }
        that.setData({ thumbWidth: width, thumbHeight: height }); //设定画布的宽高

        let roleNameInfo = that.data.RoleName + " : " + that.data.RealName;
        let time = util.date_time();
        let houseLocation = that.data.HouseLocation;

        //按比例压缩图片
        const ctx = wx.createCanvasContext('firstCanvas');
        ctx.drawImage(file, 0, 0, width, height); //先画出图片
        //将声明的时间放入canvas
        ctx.setFontSize(18) //注意：设置文字大小必须放在填充文字之前，否则不生效
        ctx.setFillStyle('white');
        ctx.fillText(roleNameInfo, 5, height - 62);
        ctx.setFontSize(14);
        ctx.fillText(time, 5, height - 45);
        
        // ctx.fillText(houseLocation, 5, height - 30);
        var lineWidth = 0;
        var lastSubStrIndex = 0; //每次开始截取的字符串的索引
        for (let i = 0; i < houseLocation.length; i++) {
          lineWidth += ctx.measureText(houseLocation[i]).width;
          if (lineWidth >= width-10) {
            ctx.fillText(houseLocation.substring(lastSubStrIndex, i), 5, height - 30);//绘制截取部分
            lastSubStrIndex = i;
            i = houseLocation.length + 2;

          }
        }
        if (lastSubStrIndex < houseLocation.length) {
          ctx.fillText(houseLocation.substring(lastSubStrIndex), 5, height - 15);
        }
        // if (lastSubStrIndex < houseLocation.length) {
        //   ctx.fillText(houseLocation.substring(lastSubStrIndex, houseLocation.length - lastSubStrIndex), 5, height - 15);
        // }

          ctx.draw(false, function () {
            setTimeout(function(){
              //绘画完成回调
              //生成图片
              wx.canvasToTempFilePath({
                canvasId: 'firstCanvas',
                success: function (ress) {
                  wx.hideLoading();
                  wx.saveImageToPhotosAlbum({  //将带有水印的图片保存到相册里
                    filePath: ress.tempFilePath,
                    success(resp) {
                    }
                  })

                  console.log(ress.tempFilePath);//ress.tempFilePath就是带有水印的图片路径
                  typeof callback == "function" && callback(ress);
                }
              })
            },600)
            
          })
      }
    })
  }

　　上面就是图片加水印的整个过程，ctx.draw方法是异步的，所以加了一个600毫秒的延迟，因为开发中出现过bug，这里是个小坑吧，如果直接画到画布上就没有这个顾虑了，但是要是想要把draw得到的带水印的照片保存到相册，或者是将带水印的图片显示在指定的页面位置等，就需要加上延迟方法。

       水印的内容是文字，这里涉及到一个文字换行的问题，主要用到的方法是ctx.measureText,用于测量文本尺寸信息，能够返回文本的宽度，通过for循环测量每个字的宽度，进行累加，当>=指定宽度时，进行文字截图，并将截取到的文字fillText填充到画布上，其中填充时的高度需要大家按照实际情况进行自己的加工，这里因为开发项目，涉及到换行的文字只有两行，所以高度上没有进行严格的处理。

     2、下面放一点儿wxml吧

<canvas style="width: {{thumbWidth}}px; height: {{thumbHeight}}px;border:1px solid black;position: absolute; left: -1000px; top:-1000px;" 
canvas-id="firstCanvas"></canvas>

       上面的代码是一个隐藏的画布，因为我是想让用户看到上传后加了水印的图片，并且需要上传多张，所以每次只是用了这个画布容器作为一个载体吧算是。

     3、其他的关于上传的方法

 // 选择图片
  chooseImage(e) {
    var _this = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
      sourceType: ['camera'], //可选择性开放访问相机
      success: res => {
        // 加水印
          res.tempFilePaths.forEach(function (item) {
            _this.compress(item, '300', false, function (ress) {
               _this.setData({
                    imagesurl: _this.data.imagesurl.concat(ress.tempFilePath),
              / })
            });
          })

      }
    })
  },

　　就这些了，有问题欢迎大家留言，一起学习进步！