给项目添加水印

1. 新建WaterMark.js文件

class WaterMark {
  static set (str) {
    const id = '1.23452384164.123412415'

    const oldNode = document.getElementById(id)
    if (oldNode) {
      document.body.removeChild(oldNode)
    }

    const can = document.createElement('canvas')
    can.width = 150
    can.height = 120

    const ctx = can.getContext('2d')
    if (ctx) {
      ctx.rotate((-20 * Math.PI) / 180)
      ctx.font = '20px Vedana'
      ctx.fillStyle = 'rgba(200, 200, 200, 0.20)'
      ctx.textAlign = 'left'
      ctx.textBaseline = 'middle'
      ctx.fillText(str, can.width / 4, can.height / 2)
    }

    const div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '64px'  //调用覆盖范围
    div.style.left = '100px'
    div.style.position = 'fixed'
    div.style.zIndex = '100000'
    div.style.width = '100%'
    div.style.height = '100vh'
    div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`
    document.body.appendChild(div)
  }
}

export default WaterMark

2. 使用

　　在需要使用的js文件中引入WaterMark.js，用户登陆成功之后调用 WaterMark（userId）

转载于:https://www.cnblogs.com/ihuangqing/p/11469579.html