小程序页面加水印

wxml

<canvas class="canvas" canvas-id="watermarkCanvas"></canvas>
<view class="watermark" style='background-image: url({{backgroundImg}});'></view>

wxss

.watermark{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  background-repeat: repeat;
}
.canvas{
  width: 200px;
  height: 200px;
  position: fixed;
  left: -200%;
}

JS

Page({
  data:{
    backgroundImg: ''
  },
    onLoad(){
      this.waterRemark()
    },
   transToBase64({ url, type = 'png' }) {
    return new Promise((resolve, reject) => {
      wx.getFileSystemManager().readFile({
        filePath: url,
        encoding: 'base64',
        success: res => {
          // console.log(res)
          resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
        },
        fail: res => reject(res.errMsg)
      })
    })
  },
  waterRemark(drawTitle='yangkeego', drawTime='2020-10-10:17:30:15') {
    const ctx = wx.createCanvasContext('watermarkCanvas')
    ctx.rotate(10 * Math.PI / 180)
    ctx.setFontSize(10)
    ctx.setFillStyle('rgba(188,188,188,0.3)')
    ctx.fillText(`水印标题：${drawTitle}`, 20, 10)
    ctx.setFontSize(10)
    ctx.setFillStyle('rgba(188,188,188,0.3)')
    ctx.fillText(drawTime, 10, 25)
    ctx.draw()
    setTimeout(() => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 130,
        height: 90,
        canvasId: 'watermarkCanvas',
        success: (res) => {
          var fileManager = wx.getFileSystemManager();
          fileManager.saveFile({
            tempFilePath: res.tempFilePath,
            success: res => {
              this.transToBase64({ url: res.savedFilePath }).then(res2 => {
                this.setData({ backgroundImg: res2 })
                wx.setStorageSync('watermark', res2)
              })
            }
          })
        }
      });
    });
  },
}）
/*
这里忽略
  getNowTime(){
    let loginTime = new Date()
    let year = loginTime.getFullYear()
    let month = loginTime.getMonth() + 1 > 10 ? loginTime.getMonth() + 1 : `0${loginTime.getMonth() + 1}`
    let date = loginTime.getDate()>10?loginTime.getDate():'0'+loginTime.getDate()
    let hour = loginTime.getHours()
    let minutes = loginTime.getMinutes()
    let seconds = loginTime.getSeconds()
    let nowTime = `${year}年${month}月${date}日 ${hour}时${minutes}分${seconds}秒`
    wx.setStorageSync('nowTime', nowTime);
  },

*/