一、什么是l-watermark？

l-watermark 是一个基于TS的WEB前端水印SDK，它包含：

• 能够覆盖多场景的水印添加方法

  1. 给网页添加文字/图片水印
  2. 给图片添加文字/图片水印
  3. 给图片添加暗水印
  4. 暗水印图片解密

• 守护水印不被篡改和删除

• 提供多种回调函数

  1. onchange: 用户试图篡改或删除水印时的回调，你在此时获取用户id并上报给服务器
  2. onerror: 水印添加失败时的回调，你可以看到水印添加失败的原因
  3. success: 水印添加成功时的回调，你可以获取加了水印的图片base64

• 自定义水印样式

  1. 自定义颜色、字体大小、层级、间距、透明度、旋转角度等
  2. 自定义图片中水印的位置：铺满、中间、左上角、右下角等

二、代码

import WaterMark from "l-watermark";

export default {
  data(){
    return {
      waterMark1:null,
      waterMark2:null
    }
  },
  mounted() {
    // 监听UserInfo事件，调用printWater方法打印水印
    window.addEventListener("UserInfo", this.printWater);
  },
  methods:{
    async printWater(){
      // 移除已存在的水印
      this.waterMark1?.remove();
      this.waterMark2?.remove();
      
      //获取用户信息
      const userInfo=JSON.parse(sessionStorage.getItem("UserInfo"))
      console.log( userInfo)
      const alias =  userInfo?.nickName || ''
      const username =  userInfo?.userName || ''
      // text = '花名' + '工号'
      const text = `${alias} ${username}` || '' 
      this.waterMark1?.remove()
      this.waterMark2?.remove()
      //获取页面dom
      const target = document.getElementById('BiViewer') 
      console.log('target', target)
      if(target) {
        this.waterMark1 = WaterMark.page({
          target: document.body,
          text,
          color: "rgba(0, 0, 0, 0.06)",
          fontSize: 13,
          cSpace: 80,
          vSpace: 80,
        })
        this.waterMark2 = WaterMark.page({
          target: document.body,
          text,
          color: "rgba(255, 255, 255, 0.06)",
          fontSize: 13,
          cSpace: 80,
          vSpace: 80,
        })
      }
    },
  } 
}

三、使用

APP.vue

import useWaterMark from "@/hooks/useWaterMark"
export default {
  name: 'App',
  mixins:[useWaterMark],
  data(){
    return {
      ...
    }
  },
}