微信小程序图片添加水印demo

需求 上传的图片要添加水印

<canvas canvas-id='imgCanvas' style='width:{{canvasWidth}}px;height:{{canvasHeight}}px;'></canvas>
<button bindtap="Photograph" >点击拍照</button>

Page({
  data: {
    canvasWidth: 250,
    canvasHeight: 250
  },
  Photograph() { 
    let that = this
    wx.chooseImage({
      count: 1, 
      quality: 'high', 
      sizeType: ['compressed'],
      sourceType: ['camera','album'], 
      success: function (res) {
        console.log(res.tempFilePaths[0])
        wx.showLoading({
          title: "正在加载图片",
          mask: true
        })
        //获取原图片信息
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            console.log(res)
            let roleNameInfo = '商用车评估师'
            //创建canvas
            const ctx = wx.createCanvasContext('imgCanvas');
            ctx.drawImage(res.path, 0, 0, 250, 250); //先画出图片
            //将声明的时间放入canvas
            ctx.setFontSize(12) //注意：设置文字大小必须放在填充文字之前，否则不生效
            ctx.setFillStyle('#ffffff');
            ctx.fillText(roleNameInfo, 160, 240);
            ctx.draw(false, function () {
              setTimeout(function () {
                //生成图片
                wx.canvasToTempFilePath({
                  quality: 1,
                  fileType: 'jpg',
                  canvasId: 'imgCanvas',
                  success: function (res) {
                    wx.hideLoading()
                    console.log(res.tempFilePath); //res.tempFilePath就是带有水印的图片路径
                  }
                })
              }, 600)
            })
          }
        })
      }
    })
  },
})