通过js渲染高层级DOM实现网页加水印
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Watermarks</title>
</head>
<style type="text/css">
html,
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
</style>
<body>
<script>
watermark({
watermark_txt: 'qinhuansky' //设置水印文本
}); function watermark(settings) {
//默认设置
let defaultSettings = {
watermark_txt: "text",
watermark_x: 20, //水印起始位置x轴坐标
watermark_y: 20, //水印起始位置Y轴坐标
watermark_rows: 20, //水印行数
watermark_cols: 20, //水印列数
watermark_x_space: 80, //水印x轴间隔
watermark_y_space: 50, //水印y轴间隔
watermark_color: '#aaa', //水印字体颜色
watermark_alpha: 0.3, //水印透明度
watermark_fontsize: '15px', //水印字体大小
watermark_font: '微软雅黑', //水印字体
watermark_width: 100, //水印宽度
watermark_height: 50, //水印长度
watermark_angle: 15 //水印倾斜度数
};
Object.assign(defaultSettings, settings);
let oTemp = document.createDocumentFragment();
//获取页面最大宽度
// let p_width = Math.max(document.body.scrollWidth, document.body.clientWidth);
// let cutWidth = p_width * 0.0150;
// let page_width = p_width - cutWidth;
let page_width = document.body.clientWidth;
//获取页面最大高度
// let page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450;
let page_height = document.body.scrollHeight + document.body.scrollTop;
//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
if (defaultSettings.watermark_cols === 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *
defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) >
page_width)) {
defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) /
(defaultSettings.watermark_width + defaultSettings.watermark_x_space));
defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width *
defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
}
//如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
if (defaultSettings.watermark_rows === 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height *
defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) >
page_height)) {
defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) /
(defaultSettings.watermark_height + defaultSettings.watermark_y_space));
defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height *
defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
}
let x;
let y;
for (let i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (let j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
let mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "9999";
mask_div.style.pointerEvents = 'none'; //pointer-events:none 让水印不遮挡页面的点击事件
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
document.body.appendChild(oTemp);
}
</script>
</body>
原文链接 ：https://www.jb51.net/article/163216.htm （在此做记录，侵权立删）
通过js渲染高层级DOM实现网页加水印的更多相关文章
- 网页加水印 svg 方式
/** *网页加水印 svg 方式 * * @export * @param {*} [{ * container = document.body, * content = '请勿外传', * wid ...
- JS判断当前DOM树是否加载完毕
/** * @function Monitor whether the document tree is loaded. * @param fn */function domReady(fn) { i ...
- BOM 浏览器对象模型_渲染引擎_JavaScript 引擎_网页加载流程
1. 浏览器核心的两个组成部分 渲染引擎 将网页代码渲染为用户视觉可以感知的平面文档 分类: Firefox Gecko 引擎 Safari WebKit 引擎 Chrom ...
- python 爬取世纪佳缘,经过js渲染过的网页的爬取
#!/usr/bin/python #-*- coding:utf-8 -*- #爬取世纪佳缘 #这个网站是真的烦,刚开始的时候用scrapy框架写,但是因为刚接触框架,碰到js渲染的页面之后就没办法 ...
- java_爬虫_获取经过js渲染后的网页源码
md 弄了一天了……(这个月不会在摸爬虫了,浪费生命) 进入正题: 起初是想写一个爬虫来爬一个网站的视频,但是怎么爬取都爬取不到,分析了下源代码之后,发现源代码中并没有视频的dom 但是在浏览器检查元 ...
- 网页加载速度优化2--先加载css，然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- 关于js渲染网页时爬取数据的思路和全过程（附源码）
于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...
- 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
- 《转》如何让你的网页加载时间降低到 1s 内
当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作. 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作.最终将好奇心日报的网页 ...
随机推荐
- 2018-8-9-win-消息
title author date CreateTime categories win 消息 lindexi 2018-8-9 15:35:4 +0800 2018-2-13 17:23:3 +080 ...
- GitHub-Hexo-Blog 集成Gitalk评论插件
在本文)末尾可查看先查看效果: 1. 新建New OAuth App 在github中,Settings / Develpoer settings OAuth Apps / New OAuth App ...
- eclipse中server location为灰色,不能修改
当自己用eclipse写好了web项目后,也同时配置了服务器(tomcat6), 上面部署完毕后,直接访问http://localhost:8080 发现是 无法访问的,这是因为,Servers这里的 ...
- bzoj1044题解
[题意分析] 本题等价于如下描述: 有一个长度为n的正整数序列,要求将其分解成m+1个子串,使最大子串和最小.求这个最大子串和及对应的分解方案数. [解题思路] 第一问二分+贪心即可.容易证明对于确定 ...
- linux文件目录颜色及特殊权限对应的颜色
白色:表示普通文件蓝色:表示目录绿色:表示可执行文件红色:表示压缩文件浅蓝色:链接文件红色闪烁:表示链接的文件有问题黄色:表示设备文件灰色:表示其它文件 各种背景颜色的显示和文件的权限有关红色背景:特 ...
- HUE工具使用
1.HUE简介 来源 HUE=HadoopUser Experience,看这名字就知道怎么回事了吧,没错,直白来说就是Hadoop用户体验,是一个开源的Apache Hadoop UI系统,由Clo ...
- nuxt 2.0采坑计之 （引入静态文件css）
nuxt 2.0采坑计之静态文件css 外部引入css 全局引用方法为 (在nuxt.config.js配置中在 module.exports = {} 中添加) head: { meta: ...
- C#简单游戏外挂制作(以Warcraft Ⅲ为例)
网上有很多外挂制作的教程,大多是讲针对大型网络游戏的,主要包含一些抓包.反汇编.C++的知识综合.事实也如此,常见的外挂都是使用VC++写的,从来没有过C#或者其他.NET语言编写的外挂. 作为微软. ...
- 2、使用siege进行服务端性能测试
先查看siege帮助 输入siege -h 翻译一下常用命令 -c 指定并发数 -r 指定重复次数 -d 指定请求的延迟时间,注意每个请求间随机延迟 -f 指定url列表,可以一次给多个地址加压 -t ...
- ArabellaCPC 2019
链接:http://codeforces.com/gym/102263 A: 签到题:A * B . B: 题意:类似取石子游戏,每个人可以取max(1, n(当前剩余) - k)个,最后取完的人赢, ...