页面添加背景水印

最新推荐文章于 2024-07-30 16:49:30 发布

半夏ing

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量270

点赞数

文章标签：前端 javascript html

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

版权

新建一个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}`)