兩步給網(wǎng)頁(yè)加水印

1. step1

// 創(chuàng)建一個(gè)watermark.js文件
let watermark = {}

// 我這里是因?yàn)橐@示兩行文字，才有兩個(gè)入?yún)⒛锼Ｒ驗(yàn)閏anvas對(duì)于文字的斷行支持的不夠好比肄，有興趣大家可以去了解
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) // 增加高度忿磅，來(lái)顯示兩行痊焊。

  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
}

// 該方法只允許調(diào)用一次
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' // 根據(jù)自己實(shí)際情況寫路徑

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

必須要在main.js中調(diào)用一次該方法盏袄，否則刷新之后就消失了。

刷新水印消失問題

答：如果你的水印是動(dòng)態(tài)的薄啥，比如需要用到在登陸之后才能獲取到的信息辕羽，可以在登陸接口成功的回調(diào)之后，調(diào)用一次該水印方法垄惧，然后將這些信息保存到localStorage中去刁愿，在main.js中獲取，再調(diào)用一次該水印方法赘艳。這樣酌毡，就可以實(shí)現(xiàn)動(dòng)態(tài)的水印克握，且刷新不會(huì)消失蕾管。

參考：vue項(xiàng)目中添加水印