Vue全局添加水印

1.创建warterMark.js

/*水印配置*/
//声明 
let watermark = {}
//水印配置 
let setWatermark = (str1, str2, str3) => {
  let id = '1.23452384164.123412415'
  // 移除水印 判断
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  //创建画布
  let createCanvas = document.createElement('canvas')
  // 设置canvas画布大小
  createCanvas.width = 280 //宽度
  createCanvas.height = 220 //高度

  //创建Context2D对象作为2D渲染的上下文。
  let Context2D = createCanvas.getContext('2d')
  /*水印样式调整配置*/
  Context2D.font = '16px Vedana' //水印文字大小
  Context2D.fillStyle = '#000' //水印颜色 HEX格式,可使用red 或者rgb格式

  // 平移并斜着展示整个水印
  Context2D.translate(createCanvas.width / 2, createCanvas.height / 2)
  Context2D.rotate(-Math.PI / 6)

  // 第一段文字（较长）
  Context2D.fillText(str1, -Context2D.measureText(str1).width / 2, 0)

  // 第二段文字（较短）
  Context2D.font = '16px Vedana' // 可根据需要调整第二段文字的大小
  Context2D.fillText(str2, -Context2D.measureText(str2).width / 2, 30)

  // 第三段文字
  Context2D.font = '14px Vedana' // 可根据需要调整第三段文字的大小
  Context2D.fillText(str3, -Context2D.measureText(str3).width / 2, 60)

  //创建元素
  let createDiv = document.createElement('div')
  createDiv.id = id
  //水印默认设置
  createDiv.style.pointerEvents = 'none' //水印层事件穿透 让水印不阻止交互事件
  createDiv.style.top = '0px' //水印顶部距离
  createDiv.style.left = '0px' //水印左侧距离
  createDiv.style.opacity = '0.05' //水印透明度
  createDiv.style.position = 'fixed' //水印定位
  createDiv.style.zIndex = '100000' //水印样式优先显示
  createDiv.style.width = document.documentElement.clientWidth - 100 + 'px' //水印宽度
  createDiv.style.height = document.documentElement.clientHeight - 100 + 'px' //水印高度
  createDiv.style.background = 'url(' + createCanvas.toDataURL('image/png') + ') left top repeat' //水印显示(关键代码)
  document.body.appendChild(createDiv) //在指定元素节点的最后一个子节点之后添加节点
  return id
}

// 此方法只允许调用一次
watermark.set = (str1, str2, str3) => {
  let id = setWatermark(str1, str2, str3)
  //设置间隔
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str1, str2, str3)
    }
  }, 500)
  //改变大小时执行
  window.onresize = () => {
    setWatermark(str1, str2, str3)
  }
}

export default watermark

2.在App.vue中引入

import Watermark from "../src/utils/warterMark";
//需要在watch里监听路由的变化从而重新加载水印
 watch: {
    $route(to, from) {
    //我是直接通过本地存储取得数据进行水印加载的也可以自定义
      let userObj = JSON.parse(localStorage.getItem("userInfo"));
      let companyName = userObj.tenantName;
      let userName = userObj.userName;
      let timer = userObj.loginDate.match(/^\d{4}-\d{2}-\d{2}/)[0];
      this.$nextTick(function () {
        //Watermark.set(companyName, userName, timer); //使用本地存储中的数据渲染
        Watermark.set('水印1', '水印2', '水印3'); //自定义数据渲染
      });
    },
  },
  //需要在页面加载完成后进行水印加载
  mounted() {
    let userObj = JSON.parse(localStorage.getItem("userInfo"));
    let companyName = userObj.tenantName;
    let userName = userObj.userName;
    let timer = userObj.loginDate.match(/^\d{4}-\d{2}-\d{2}/)[0];
     // Watermark.set(companyName, userName, timer); //使用本地存储中的数据渲染
        Watermark.set('水印1', '水印2', '水印3'); //自定义数据渲染
  },