微信小程序拍照加水印

根据上次

1.wxml代码： 因为拍照要到指定位置显示，这里的canvas我想隐藏，就用了css：position:fixed;left: 10000rpx。之前尝试过hidden=‘true’或者display: block；，发现没有渲染成功，最后只能靠css样子控制了。

2.js部分：

  ChooseImage() {
    let that = this
    wx.chooseImage({
      count: 4, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album','camera'], //从相册选图 、使用相机
      success: (res) => {
        that.compress( res.tempFilePaths[0])
      }
    });
  },
 compress(file) {    //接收传过来的图片
  var that = this;
  //获取原图片信息
  wx.getImageInfo({
    src: file,
    success: function (res) {
      wx.showLoading({
        title: "正在加载图片",
        mask: true
      })

       var maxWidth = 220, maxHeight = false
        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);
        }

      var width = res.width, height = res.height;
      that.setData({ thumbWidth: width, thumbHeight: height }); //设定画布的宽高
      
      //显示的内容和时间，可按自己需求改
      let text = "湖北武汉市光谷软件园 : ";
      let time = App.formatTime(new Date());

      //按比例压缩图片
      const ctx = wx.createCanvasContext('firstCanvas');
      ctx.drawImage(file, 0, 0, width, height); //先画出图片
      //将声明的时间放入canvas
      ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
      ctx.setFillStyle('white');
      ctx.fillText(text, 10, height - 72);
      ctx.setFontSize(26);
      ctx.fillText(time, 10, height - 35);
        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就是带有水印的图片路径
                //调用自己的上传方法
                that.UploadFile(ress.tempFilePath)
              }
            })
          },600)
           
        })
    }
  })
}