如何给项目加上水印

①创建water.js文件 并复制以下代码放在文件中

var watermark = {}

function setWatermark(args) {
  // 声明一个怪异一点的变量，确保id的唯一性
  var id = '111.222.333.456'
  var xIndex = 15// 绘制文本的 x 坐标位置
  var yIndex = 65// 绘制文本的 y 坐标位置
  var xInterval = 25// 有多个参数时的行间间隔
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  // 利用canvas绘制水印信息
  var can = document.createElement('canvas')
  can.width = 250
  can.height = 150
  var cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '14px Arial'
  // ziti yanse
  cans.fillStyle = 'rgba(200, 200, 200, 0.2)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  for (let i = 0; i < args.length; i++) {
    cans.fillText(args[i], xIndex, yIndex) // 绘制水印文案
    yIndex += xInterval // 设置每行间隔
  }
  // 创建div用于显示
  var div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '0px'
  div.style.left = '0px'
  div.style.right = '0px'
  div.style.bottom = '0px'
  div.style.position = 'fixed'
  div.style.zIndex = '100000'
  div.style.display = 'block'
  div.style.width = document.documentElement.clientWidth + 'px'
  div.style.height = document.documentElement.clientHeight + 'px'
  // div承载水印显示
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}

function createObserver(id, args) {
// 创建一个观察器实例并传入回调函数
  var observer = new MutationObserver((records) => {
    const record = records[0]
    if (record.type === 'attributes' && record.attributeName === 'style') {
      // reset(() => {
      //   h1.setAttribute('style', 'margin:100px;')
      // })
      setWatermark(args)
    } else if (record.type === 'characterData') {
      setWatermark(args)
      // reset(() => {
      //   h1.textContent = '别改我'
      // })
      // const id = setWatermark(args)
    }
  })

  var option = {
    childList: true,
    attributes: true,
    subtree: true,
    attributesOldValue: true,
    characterData: true,
    characterDataOldValue: true
  }

  observer.observe(document.body, option)// 观察body下节点的变化
}

watermark.set = function() {
  const args = Array.prototype.slice.apply(arguments)
  const id = setWatermark(args)

  // 创建观察器检测如果水印被去掉了，自动给加上
  createObserver(id, args)

  // 在窗口大小改变之后,自动触发加水印事件
  window.onresize = function() {
    setWatermark(args)
  }
}
export {
  watermark
}

②将water.js文件引入到layout中

import { watermark } from '@/utils/water'

③调用函数并传入水印文字

  mounted() {
    watermark.set(this.userName || '阿里')
  },