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、访问页面，查看页面水印是否显示