微信小程序图片水印添加

js

  getCanvasOne(url) {
    var mycenter = 0 //文字左右居中显示
    var myheight = 0 //文字高度
    const that = this
    const query = wx.createSelectorQuery();
    query.select('#canvasId').fields({
      node: true,
      size: true
    }).exec((res) => {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d')
      new Promise(function (resolve) {
        // 绘制背景图片
        wx.getImageInfo({
          src: url,
          success(res) {
            mycenter = res.width / 2
            myheight = res.height
            canvas.width = res.width
            canvas.height = res.height
            const img = canvas.createImage();
            img.src = res.path;
            img.onload = () => {
              ctx.drawImage(img, 0, 0, res.width, res.height);
              resolve(true);
            }
          }
        })
      }).then(function () {
      // 项目需要获取经纬度 
        wx.getLocation({
          type: 'gcj02',
          success(ress) {
            var Time = util.formatTime(new Date()).replaceAll(/\//g, '-')
            // 绘制水印
            ctx.font = "600 40px Arial";
            ctx.textAlign = 'center'
            ctx.fillStyle = 'rgba(178, 178, 178,0.8)';
            ctx.fillText(`xxxx`, mycenter, myheight - 450)
            ctx.fillText(`${Time}`, mycenter, myheight - 400)
            ctx.fillText(`经度：${ress.latitude}`, mycenter, myheight - 350)
            ctx.fillText(`纬度:${ress.longitude}`, mycenter, myheight - 300)
            wx.canvasToTempFilePath({
              canvas: canvas,
              success(res) {
                that.setData({
                  latitude: ress.latitude,
                  longitude: ress.longitude
                })
                // 上传绘制水印成功的图片
                that.uploadPhotos(res, ress.latitude, ress.longitude)
              }
            })
          }
        })
      }).catch((err) => {
        console.log('水印失败');
      })
    })
  },

wxml

  <view style='width:0rpx;height:0rpx;overflow:hidden;'>
    <canvas id='canvasId' type="2d" style="position:fixed;left:9999px"></canvas>
  </view>