vue项目增加水印

vue项目增加水印

最近项目要求在项目中增加水印，以体现安全性问题；
下面是在项目中的代码

<template>
<div class="xt-water-mark">
</div>
</template>
<script>
export default {
  name: 'xtWaterMark',
  data () {
    return {
      maskDiv: {}, // 当前显示的水印div节点DOM对象
      waterText:''
    }
  },
  mounted () {
    //获取当前登陆用户信息
    this.getUserInfo()
    // 确认DOM渲染后再执行
    this.$nextTick(() => {
      // 创建水印节点
      this.init()
    })
  },
  methods: {
      //获取当前登陆用户信息
    getUserInfo() {
        const user = JSON.parse(sessionStorage.getItem('userInfo')) || {}
        this.waterText = user.userName + '(' + user.userCode + ')' 
    },
    init () {
      // 查看页面上有没有，如果有则删除
      if (document.getElementById('_waterMark') !== null) {
          const childelement = document.getElementById('_waterMark')
          childelement.parentNode.removeChild(childelement)
      }
      const canvas = document.createElement('canvas')
      canvas.id = 'canvas'
      canvas.width = '200' // 单个水印的宽高
      canvas.height = '130'

      this.maskDiv = document.createElement('div')
      const ctx = canvas.getContext('2d')
      ctx.font = 'normal 18px Microsoft Yahei' // 设置样式
      ctx.fillStyle = 'rgba(112, 113, 114, 0.1)' // 水印字体颜色
      ctx.rotate(30 * Math.PI / 180) // 水印偏转角度
      ctx.fillText(this.waterText, 30, 20)
      const src = canvas.toDataURL('image/png')
      this.maskDiv.style.position = 'fixed'
      this.maskDiv.style.zIndex = '9999'
      this.maskDiv.id = '_waterMark'
      this.maskDiv.style.top = '0'
      this.maskDiv.style.left = '0'
      this.maskDiv.style.height = '100%'
      this.maskDiv.style.width = '100%'
      this.maskDiv.style.pointerEvents = 'none'
      this.maskDiv.style.backgroundImage = 'URL(' + src + ')'
      // 水印节点插到body下
      document.body.appendChild(this.maskDiv)
    },
    // 手动销毁水印DOM
    removeMaskDiv () {
      if (document.getElementById('_waterMark') !== null) {
        const childelement = document.getElementById('_waterMark')
        childelement.parentNode.removeChild(childelement)
      }
    },
    // 手动生成水印
    createMaskDiv () {
      this.init()
    }
  },

  beforeDestroy () {
    // 组件销毁时去除生成在body节点下的水印节点
      this.removeMaskDiv()
  }
}
</script>
<style>
</style>

在写代码时也有参考其他博主代码，不过忘记原博主文章地址，感谢道友们！