在网站开发中,为了防止用户截图或录屏暴露敏感信息,追踪用户来源,需要在网页中添加水印。
方式一:集成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();
},
}