星光灿烂 » 怎样给网页加水印

怎样给网页加水印

阅读次数：17

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

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

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

（这里是图片）

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

实现步骤如下：

先提取出每个水印文字的共同点，设定样式。在这里，我们把样式放到CSS 样式里面。

.text-div
{
transform: rotate(-25deg);
visibility: visible;
position: fixed;
overflow: hidden;
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即可。:)

参考资料

本文的代码实现参考了贫民窟的艺术家

怎样给网页加水印

请你留言