通过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 内
当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景,也介绍了他们的应对方案,还做了一点技术选型的工作. 经过一段时间的项目实践,在先前方案的基础上又做了很多深入的优化工作.最终将好奇心日报的网页 ...
随机推荐
- Apache Shiro反序列化远程代码执行
一.漏洞利用 wget https://raw.githubusercontent.com/sv3nbeast/ShiroScan/master/moule/ysoserial.jar 反弹shell ...
- python使用SMTP发邮件时使用Cc（抄送）和Bcc（密送）
SMTP发送邮件的时候,并没有特殊的通信语句告诉邮件服务器 谁是主送,谁是抄送/密送,这三个角色都是以同样的方式告诉邮件服务器的,然后重点在邮件内容里. 邮件内容分为头和体两部分(就像http),头部 ...
- Spring集成RMI实现远程调用
前提: 1.开发工具: jdk tomcat ecplise,开发工具的使用本篇不做介绍. 2.需具备以下知识:javase servelt web rmi spring maven 一.关于RMI ...
- IntelliJ IDEA 添加本地xsd文件
地址: http://code.alibabatech.com/schema/dubbo/dubbo.xsd
- yarn安装node-sass报错问题
react前端项目在用yarn install命令安装依赖时报错了,看了下报错信息是node-sass安装的时候编译报错. 解决方法: 第一步:配置淘宝镜像 yarn config set regis ...
- html中设置一个div可编辑文本
<div contenteditable="true"></div> <!-- outline: none;设置获取焦点没有高亮边框 -->
- HTML5的新增功能有哪些？
HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. 新的功能: 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的 ...
- 二分法查找--Python
二分查找算法,最常规的应用就是在一个有序数组中找特定的数.一般分为四步走: 1. 判定条件为low小于high,low=0, high=size-1 2. mid=(low+high) / 2 3. ...
- 记一次面经pm
记一次面经 介绍下你自己的这个项目. 浅谈一下数据结构. 参考网站 在我的记忆中,数据结构包括链表.线性表.栈与队列.数组.一些排序,比如冒泡排序.快速排序.希尔排序.堆排序等,还有一些树 ...
- 10. Python面向对象
Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.如果接触过java语言同学应该都知道,Java面向对象三大特征是:封装.继承.多态.Pytho ...