引入依赖

npm install nanoid@3.3.4 -D

水印功能

import  { nanoid } from 'nanoid'
// 创建水印
let watermark = {}
  
let setWatermark = ({firText, secText, thirText}, sourceBody) => {

  let id = nanoid(10)
  
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }
  
  let can = document.createElement('canvas')
  can.width = 300
  can.height = 300
  
  let cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '20px Vedana'
  cans.fillStyle = 'rgba(0, 0, 0, .1)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
 //cans.fillText(text, can.width / 20, can.height )
 cans.fillText(firText, 10, 130 )
  cans.font = '16px Vedana'
  cans.fillText(secText, 10, 150 )
  cans.fillText(thirText, 10, 170 )
  
  let water_div = document.createElement('div')
  water_div.id = id
  water_div.style.pointerEvents = 'none'
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  
  if(sourceBody){
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    sourceBody.appendChild(water_div)
  }else{
    water_div.style.top = '3px'
    water_div.style.left = '0px'
    water_div.style.position = 'fixed'
    water_div.style.zIndex = '100000'
    water_div.style.width = document.documentElement.clientWidth  + 'px'
    water_div.style.height = document.documentElement.clientHeight  + 'px'
    document.body.appendChild(water_div)
  }
  
  return id
}

let id
watermark.set = (text, sourceBody) => {
   id = setWatermark(text, sourceBody)
   watermark.id = id

}
watermark.remove = (sourceBody) => {
  if(sourceBody && id) {
    sourceBody.removeChild(document.getElementById(id))
	watermark.id = ''
  }else {
    document.body.removeChild(document.getElementById(id))
	watermark.id = ''
  }
}
export const waterMark = watermark

引入水印功能

在mounted中加入水印功能

import {waterMark} from '@/util/util'
waterMark.set(`xxxxx${this.userInfo.account}`)

贡献者

• flycodeu

版权所有

版权归属：flycodeu

许可证：署名 4.0 国际 (CC-BY-4.0)