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

怎样给网页加水印

PDF版

在查询 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即可。:)

 

参考资料




请你留言

当前登录用户:Frank. 登出 »