WaterMark.js给网页加水印

两步给网页加水印

1. step1

// 创建一个watermark.js文件
let watermark = {}

// 我这里是因为要显示两行文字，才有两个入参。因为canvas对于文字的断行支持的不够好，有兴趣大家可以去了解
let setWatermark = (str1, str2) => {
  let id = '1.23452384164.123412415'

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  let can = document.createElement('canvas')
  can.width = 300
  can.height = 180

  let cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '16px Vedana'
  cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
  cans.textAlign = 'start'
  cans.fillText(str1, 1, can.height / 2)
  cans.textAlign = 'start'
  cans.fillText(str2, -10, can.height / 2 + 25) // 增加高度，来显示两行。

  let div = document.createElement('div')
  div.id = id
  div.style.pointerEvents = 'none'
  div.style.top = '70px'
  div.style.left = '100px'
  div.style.position = 'fixed'
  div.style.zIndex = '100'
  div.style.width = document.documentElement.clientWidth - 10 + 'px'
  div.style.height = document.documentElement.clientHeight - 100 + 'px'
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  document.body.appendChild(div)
  return id
}

// 该方法只允许调用一次
watermark.set = (str1, str2) => {
  let id = setWatermark(str1, str2)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str1, str2)
    }
  }, 500)
  window.onresize = () => {
    setWatermark(str1, str2)
  }
}

export default watermark

2. step2

// 在main.js中引入
import Watermark from './utils/watermark' // 根据自己实际情况写路径

new Vue({
  el: '#app',
  store,
  router,
  components: {App},
  template: '',
  created: () => {
    let name = LocalStorageFactory.get('OP_NAME')
    let id = LocalStorageFactory.get('EXTERNAL_ID')
    if (name && id) {
      makeWatermark(name, id) // 重点是这一段
    }
  }
})

必须要在main.js中调用一次该方法，否则刷新之后就消失了。

刷新水印消失问题

答：如果你的水印是动态的，比如需要用到在登陆之后才能获取到的信息，可以在登陆接口成功的回调之后，调用一次该水印方法，然后将这些信息保存到localStorage中去，在main.js中获取，再调用一次该水印方法。这样，就可以实现动态的水印，且刷新不会消失。

参考：vue项目中添加水印