記錄一下Vue頁面添加水印

1、加水印方法（，新建文件 watermark.js，將文件放到assets文件夾下）

let watermark = {}

let setWatermark = (str) => {

  let id = '1.23452384164.123412415'

  if (document.getElementById(id) !== null) {

    document.body.removeChild(document.getElementById(id))

  }

  let can = document.createElement('canvas')

  can.width = 150

  can.height = 120

  let cans = can.getContext('2d')

  cans.rotate(-20 * Math.PI / 180)

  cans.font = '15px Vedana'

  cans.fillStyle = 'rgba(0, 0, 0, 0.50)'

  cans.textAlign = 'left'

  cans.textBaseline = 'Middle'

  cans.fillText(str, can.width / 20, can.height)

  let div = document.createElement('div')

  div.id = id

  div.style.pointerEvents = 'none'

  div.style.top = '3px'

  div.style.left = '0px'

  div.style.position = 'fixed'

  div.style.zIndex = '100000'

  div.style.width = document.documentElement.clientWidth * 0.5 + 'px'

  div.style.height = document.documentElement.clientHeight + 'px'

  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'

  document.body.appendChild(div)

  return id

}

// 該方法只允許調用一次

watermark.set = (str) => {

  let id = setWatermark(str)

  setInterval(() => {

    if (document.getElementById(id) === null) {

      id = setWatermark(str)

    }

  }, 2000)

  window.onresize = () => {

    setWatermark(str)

  }

}

export default watermark

2、引用水印方法（在main.js中）

import watermark from '@/assets/watermark.js'

Vue.prototype.$watermark = watermark

3、使用水印方法（需要加水印的頁面使用）

 mounted: function () {

    this.$watermark.set("僅用於專家評審")

  },