页面添加背景水印_背景水印的网页-CSDN博客

本文链接：https://blog.csdn.net/Fiona_lms/article/details/131701580

该代码段定义了一个JavaScript对象waterMark，用于在网页上生成和设置水印。它使用canvas元素绘制文本，然后将其作为背景图像添加到一个固定位置且透明的div元素中。水印文本可旋转并调整颜色、大小和位置。代码还包含一个setWaterMark方法，用于定期更新水印并在窗口缩放时重新绘制。此功能适用于路由守卫，确保页面加载时显示水印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个js页面，命名为waterMarker.js
具体代码如下：

let waterMark = {};

let setWaterMark = (str1)=>{
let id = "1.23452384164.123412415";
if(document.getElementById(id) != null){
	document.body.removeChild(document.getElementById(id));
}
let can = document.createElement('canvas');
can.width = 300;
can.height = 120;

let cans = can.getContext('2d');
cans.rotate(-20 * Math.PI / 180);
cans.font = '15px Vedana';
cans.fillStyle = "#666666";
cans.textAlign = 'center';
cans.fillText(str1,can.width/2,can.height);//水印在画布的x、y轴

let div = document.createElement('div');
div.id = id;
div.style.pointerEvents = 'none';
div.style.top = '0px';
div.style.left = '0px';
div.style.opacity = '0.15';
div.style.position = 'fixed';
div.style.zIndex = '1';
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
}

waterMark.set = (str)=>{
	let id = setWaterMark(str);
	setInterval(()=>{
		if(document.getElementById(id) === null){
		   id = setWaterMark(str);
		}
	},500)
	window.onresize = ()=>{
		setWaterMark(str);
    }
}
export default waterMark;


//一般是在路由守卫的地方使用 ，先引入，然后直接调用
waterMark.set(`${str}`)