VUE实现页面添加水印

在网站开发中，为了防止用户截图或录屏暴露敏感信息，追踪用户来源，需要在网页中添加水印。

方式一：集成watermark组件

1、添加watermark-dom依赖

npm install watermark-dom

2、在AppMain.vue文件引入水印模块 

import watermark from "watermark-dom";

export default {
  name: "AppMain",
  mounted() {
    
    // 加载水印
    setInterval(() => {
        const username = "我的水印";
        const serviceTime = parseTime(new Date());
        const option = {
          watermark_txt: username + serviceTime, //水印的内容
          // watermark_font: '微软雅黑', //水印字体 默认微软雅黑 
          // watermark_color: "#777", //水印字体颜色
          // watermark_fontsize: "18px", //水印字体大小
          // watermark_alpha: 0.1, //水印透明度，要求设置在大于等于0.005 默认0.15
          // watermark_angle: 30, //水印倾斜度数
          // watermark_width: 300, //水印宽度
          // watermark_height: 100, //水印长度
          // watermark_x: 100, //水印起始位置x轴坐标
          // watermark_y: 0, //水印起始位置Y轴坐标
          // watermark_x_space: 100, //水印x轴间隔
          // watermark_y_space: 100, //水印y轴间隔
          // watermark_rows: 4, //水印行数
          // watermark_cols: 8, //水印列数
          // watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
          // watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
          // watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上
        };
        watermark.load(option);//加载水印
    }, 1000)
    // 缩放水印位置不变
    window.addEventListener('resize', this.loadMark);
  },
  computed: {
    
  },
  beforeDestory(){
    window.removeEventListener('resize', this.loadMark);
  },
};

//移除已加载水印
// watermark.remove();（不生效）
 watermark.load({
   watermark_txt: ' ' ,// 水印的内容 注意：不能是空字符串，必须是空格。
 })

3、访问页面，查看页面水印是否显示

方式二：使用canvas来画水印，防止水印信息被篡改

1、创建watermark.js

	/**  
	 *	水印添加方法  
	*/
  let setWatermark = (str1, str2) => {
    let id = 'watermark_id';
    if (document.getElementById(id) !== null) {
      document.body.removeChild(document.getElementById(id));
    }
    let can = document.createElement('canvas');
    // 设置canvas画布大小
    can.width = 250;
    can.height = 120;
    let cans = can.getContext('2d');
    cans.rotate(-20 * Math.PI / 180); // 水印旋转角度
    cans.font = '15px Vedana';
    cans.fillStyle = '#000000';
    cans.textAlign = 'center';
    cans.textBaseline = 'middle';
    cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x，y轴
    cans.fillText(str2, can.width / 2, can.height + 22);
	
    let div = document.createElement('div')
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '40px';
    div.style.left = '0px';
    div.style.opacity = '0.15';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = document.documentElement.clientWidth + 'px';
    div.style.height = document.documentElement.clientHeight  + 'px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    document.body.appendChild(div);
    return id;
  }

  // 添加水印方法
  export const setWaterMark = (str1, str2) => {
    let id = setWatermark(str1, str2);
    if (document.getElementById(id) === null) {
      id = setWatermark(str1, str2);
    }
  }

  // 移除水印方法
  export const removeWatermark = () => {
    let id = 'watermark_id';
    if (document.getElementById(id) !== null) {
      document.body.removeChild(document.getElementById(id))
    }
  }

2、在AppMain.vue文件引入

import { removeWatermark, setWaterMark } from '@/utils/watermark'

export default {
  name: 'AppMain',
  mounted() {
    // 加载水印
    setInterval(() => {
       setWaterMark("我的水印",parseTime(new Date()))
    }, 1000)
  },
  computed: {
    
  },
  beforeDestory(){
    removeWatermark();
  },
}

3、访问页面，查看页面水印是否显示