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

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),
              / })
            });
          })

      }
    })
  },

　　就這些了，有問題歡迎大家留言，一起學習進步！