本站首页 返回顶部 关于博主

怎样给网页加水印

PDF版

在查询 SSRF 漏洞相关文档的时候,找到一个网站,发现这个网站网页加了水印,觉得挺有意思。

于是读了它的代码,在此基础上稍加改进,与大家一起分享。

在分享之前,我们先看一下 Demo,以便对水印效果有个直观的印象。在 Demo 网页中,网页的背景上按照行列整齐地显示淡淡的水印文字,如下图。


实现的原理比较简单:这个页面的背景是由很多相同样式的水印文字排列而成的。先设计单个水印文字的样式(包括水印占的长度和宽度),然后根据屏幕大小,计算出屏幕中每行、每列水印的位置。然后在整个页面上打印所有的水印文字就可以了。

实现步骤如下:

  • 先提取出每个水印文字的共同点,设定样式。在这里,我们把样式放到CSS 样式里面。
.text-div
{
	transform: rotate(-25deg);
	visibility: visible;
	position: fixed;
	z-index: 9999;
	opacity: 0.07;
	font-size: 20px;
	color: black;
	text-align: center;
	display: block;
}

在这段代码里,水印文字的切斜角度是 25 度;z-index 设为 9999,以便永远显示在最上面;不透明度设为 0.07,使其看起来很淡,不会影响文档的内容。

  • 计算水印的行数、列数。
var height = screen.availHeight;
var width = screen.availWidth;

// calculate the counts of rows and columns seperately.
var columnCnt = Math.ceil( width / PER_WIDTH );
var rowCnt = Math.ceil( height / PER_HEIGHT );

在以上代码中,通过屏幕的宽度除以每个水印文字占用的宽度得到每行的水印个数(列数),通过屏幕的高度除以每个水印文字占用的高度得到水印的行数。数字向上取整。

  • 遍历,打印所有的水印。
var wmDiv = document.createElement('div');

for( var i = 0 ; i < rowCnt; i ++ )
{
	for( var j = 0; j < columnCnt; j ++ )
	{
		var textDiv = drawText( i, j );
		wmDiv.appendChild( textDiv );
	}
}

document.body.appendChild(wmDiv);

function drawText( i, j )
{
	var divDom = document.createElement('div');
	var textDom = document.createTextNode( WM_TEXT );
	divDom.appendChild( textDom );

	var top = BASE_TOP + PER_HEIGHT * i;
	var left = BASE_LEFT + PER_WIDTH * j;

	divDom.classList.add("text-div");

	var styleValue = divDom.style;
	styleValue.left = left + 'px';
	styleValue.top = top + 'px';

	return divDom;
}

这样,短短几十行代码就完成了,简单吧。完整的代码可参见 Demo 页面,F12即可。:)

 

参考资料




评论(1条)

  1. 1. 剑锋 评论道:

    正在找怎么实现水印的功能,谢谢了!

请你留言