给页面添加自定义文案水印

需求，要给应用内所有页面添加水印，水印文案为用户名字加工号，水印水印内容是动态的

实现思路： canvas 绘制文案后合成 一张base64图片，添加一个dom占满全屏背景图片使用该图片

代码如下

/**
  * @param str 水印文案，自定义
  * 所有页面加水印
  */
function addWaterMark(str = '') {
  // 水印文字，父元素，字体，文字颜色
  const parentNode = document.querySelector('.app-water-mark')
  const can = document.createElement('canvas')
  parentNode.appendChild(can)
  can.width = 200 // 140
  can.height = 150 // 86
  can.style.display = 'none'
  const cans = can.getContext('2d')
  cans.translate(100, 75) // 旋转后 文案保持正中间
  cans.rotate((-30 * Math.PI) / 180) // 逆时针旋转30°
  cans.translate(-100, -75) // 旋转后 文案保持正中间
  cans.font = '16px Microsoft Yahei'
  cans.fillStyle = 'rgba(180, 180, 180, 0.3)'
  cans.textAlign = 'center'
  // cans.textBaseline = 'Middle' // as CanvasTextBaseline;
  cans.fillText(str, 100, 80, 200) 
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}

<div class="app-water-mark" />

<style>

  .app-water-mark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; // 去掉dom点击事件
    z-index: 20;
  }
</style>

水印效果图

页面效果图