html页面自定义文字水印效果案例
在系统开发过程中，一些数据或页面比较敏感的地方，客户会要求实现水印效果，防止内部人员截图或拍照泄露信息。
自定义文字水印顾名思义就是利用js在完成页面渲染的同时，往页面的最底层动态生成多个带水印信息的div。
效果图如下：
这个解决方案在使用过程中不仅可以自定义水印内容，还可以自定义样式，如倾斜角angle、透明度opacity、字体fontFamily、字体大小fontsize、左右上下间隔等等。
其html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水印输出</title>
</head>
<body>
<div>
<h6>HELLO WORLD</h6>
<!-- 省略部分代码 -->
</div>
<!-- 引入js（路径根据项目情况确定） -->
<script type="text/javascript" src="watermark.js"></script>
<script>
// 自定义样式
const setting = {
"text": "测试水印", // 水印内容
"innerDate": true, // 在水印下方增加日期
"width": 110 // 水印宽度
};
// 渲染
watermark.build(setting);
</script>
</body>
</html>
自定义属性如下：
const setting = {
text: "广州坤硕授权", // 默认水印内容
beginX: 50, // 默认起始x坐标
endX: 0, // 默认结束x坐标
beginY: 50, // 默认起始y坐标
endY: 0, // 默认结束y坐标
intervalX: 150, // 默认横向间隔宽度
intervalY: 100, // 默认纵向间隔高度
opacity: 0.3, // 字体透明度
angle: 20, // 字体倾斜度
fontsize: '15px', // 字体大小
fontFamily: '微软雅黑', // 字体
width: 100, // 水印（每个）宽度
height: 80, // 水印（每个）高度
innerDate: false, // 是否附带日期
};
完整js如下：
/**
* 自定义文字水印
*/
const watermark = function () {
return {
build: function(arg) {
// 获取页面宽度
let maxWidth = Math.max(document.body.scrollWidth, window.screen.width) - 20;
// 获取页面高度
let maxHeight = Math.max(document.body.scrollHeight, document.body.clientHeight) + 100;
if (maxHeight === 0){
console.info("该页面无敏感内容~");
return;
}
const setting = {
text: "广州XX公司授权", // 默认水印内容
beginX: 50, // 默认起始x坐标
endX: 0, // 默认结束x坐标
beginY: 50, // 默认起始y坐标
endY: 0, // 默认结束y坐标
intervalX: 150, // 默认横向间隔宽度
intervalY: 100, // 默认纵向间隔高度
opacity: 0.3, // 字体透明度
angle: 20, // 字体倾斜度
fontsize: '15px', // 字体大小
fontFamily: '微软雅黑', // 字体
width: 100, // 水印（每个）宽度
height: 80, // 水印（每个）高度
innerDate: false, // 是否附带日期
};
// 默认变量与自定义变量结合
if (arguments.length ===1 && typeof arguments[0] === "object"){
const src = arguments[0] || {};
for (const key in src){
if (!src.hasOwnProperty(key) || !src[key]){
continue;
}
for (const def in setting){
if (key === def){
setting[def] = src[key];
}
}
}
}
// 计算列个数
const cols = parseInt((setting.intervalX + maxWidth - setting.beginX - setting.endX) / (setting.width + setting.intervalX) + "");
// 计算行个数
const rows = parseInt((setting.intervalY + maxHeight - setting.beginY - setting.endY) / (setting.height + setting.intervalY) + "");
// 水印内容附加日期
if (setting.innerDate){
const date = new Date();
setting.text = [setting.text, "<br>", date.getFullYear(), "年", date.getMonth() + 1, "月", date.getDate(), "日"].join("");
}
const fragment = document.createDocumentFragment();
let x, y;
for (let i=0; i<rows; i++){
y = setting.beginY + (setting.intervalY + setting.height) * i;
for (let j=0; j<cols; j++){
x = setting.beginX + (setting.width + setting.intervalX) * j;
const element = document.createElement('div');
element.id = 'watermark' + i + j;
// 设置倾斜角
element.style.MozTransform = "rotate(-" + setting.angle + "deg)";
element.style.msTransform = "rotate(-" + setting.angle + "deg)";
element.style.OTransform = "rotate(-" + setting.angle + "deg)";
element.style.transform = "rotate(-" + setting.angle + "deg)";
element.style.position = "absolute";
element.style.left = x + 'px';
element.style.top = y + 'px';
element.style.overflow = "hidden";
element.style.zIndex = "9999";
element.style.pointerEvents = 'none';
element.style.opacity = setting.opacity;
element.style.fontSize = setting.fontsize;
element.style.fontFamily = setting.fontFamily;
element.style.color = '#aaa';
element.style.textAlign = "center";
element.style.width = setting.width + 'px';
element.style.height = setting.height + 'px';
element.style.display = "block";
element.innerHTML = setting.text;
fragment.appendChild(element);
}
}
document.body.appendChild(fragment);
}
}
}();
- 其中获取页面宽度去的是屏幕的分辨率
window.screen.width考虑的是，当用户通过F12打开开发者工具并显示在左右两边时，此时刷新页面，通过document.body.clientHeight获取到的宽度是不包括开发者工具页面的宽度的，这时候水印就没有全部页面占满，那么用户关闭开发者工具时，并不会刷新页面重新生成水印，所以就会出现一边有水印而一遍没有，如此水印便失去了震慑能力，所以应该去屏幕分辨率较好。 - 列的个数及行的个数是根据自定义或者默认的水印起始结束坐标、水印间隔宽高度、水印宽高度与页面的宽高度进行动态计算，也就是说我们可以通过印起始结束坐标、水印间隔宽高度、水印宽高度来控制水印的密集程度。
- 此外，通过灵活设置起始坐标以及结束坐标可以设置仅仅在页面中的一小块区域出现水印，其他区域则不出现水印。
- 函数的入参是一个
json对象
html页面自定义文字水印效果案例的更多相关文章
- Java 给Word每一页设置不同文字水印效果
Word中设置水印时,可预设的文字或自定义文字设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以Ja ...
- java创建透明背景的PNG图片加自定义文字水印
人在码上走,需求天天有.这不,今天前端让我返回一个带自定义水印的背景图片.一通google,有现成的代码,但是基本是直接在源图上添加水印,生成出来的文字样式也没有控制好,看来又只有自己造轮子了. 过程 ...
- C# 给Word每一页设置不同文字水印
Word中设置水印时,可预设的文字或自定义文字设置为水印效果,但通常添加水印效果时,会对所有页面都设置成统一效果,如果需要对每一页或者某个页面设置不同的水印效果,则可以参考本文中的方法.下面,将以C# ...
- java解决poi导出excel文字水印，导出excel不可操作问题
首先需求是用户提出导出excel数据需使用水印备注其用途: 其实就是在导出excel的同时带有自定义文字水印的导出. 那么我们首先想到的肯定是以一个什么样的思路去解决该问题,首先查找poi导出exce ...
- C# 处理PPT水印（二）——去除水印效果（文本水印、图片水印）
本文将对C#处理PPT幻灯片中的水印进一步说明和介绍.在C# 处理PPT水印(一)一文中,分享了如何插入水印效果的方法,包括插入文字水印效果.插入图片作为水印效果两种情况,那对于不需要水印效果的情况, ...
- Salesforce 开发整理（十一） 自定义放大镜查找效果
有时候在自定义的visualforce页面上,需要实现系统标准的查找样式,当不能使用标准的style的时候,我们只能选择自定义实现,下面分享一个demo,预览效果如下: 实现代码,Visualforc ...
- PHP实现水印效果（文字、图片）
第一种 <?php /** * 功能:给一张图片加上水印效果 * $i 要加水印效果的图片 * $t 水印文字 * $size 文字大小 * $pos 水印的位置 * $color 文字的颜色 ...
- C# 处理PPT水印（一）——添加水印效果（文字水印、图片水印）
对文档添加水印可以有效声明和保护文档,是保护重要文件的方式之一.在PPT文档中同样也可以设置水印,包括文本水印和图片水印,本文将讲述如何通过Spire.Presentation for .NET来对P ...
- 自定义View 水印布局 WaterMark 前景色 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
随机推荐
- web项目中各工具的作用
一.HTML:用于搭建基础网页,展示网页的内容 Hyper Text Markup Language 超文本标记语言 ,是最基础的网页开发语言. * 超文本: * 超文本是用超链接的方法,将各种不同空 ...
- SpringBoot 整合 hibernate 连接 Mysql 数据库
前一篇搭建了一个简易的 SpringBoot Web 项目,最重要的一步连接数据库执行增删改查命令! 经过了一天的摸爬滚打,终于成功返回数据! 因为原来项目使用的 SpringMVC + Hibern ...
- Oracle check TBS usage
select d.tablespace_name, space||'M' "SUM_SPACE(M")", blocks "SUM_BLOCKS", ...
- 第41天学习打卡（死锁 Lock synchronized与Lock的对比 线程协作 使用线程池）
死锁 多个线程各自占有一些共享资源,并且互相等待其他线程占有的资源才能运行,而导致两个或者多个线程都在等待对方释放资源,都停止执行的情形.某一个同步块同时拥有"两个以上对象的锁"时 ...
- Kubernetes - Kubelet TLS Bootstrapping
一.简单说明 写这个的初衷是自己搜索TLS Bootstrapping的时候没有搜到自己想要的东西,因为TLS Bootstrapping经过很多版本之后也发生了一些变化,所以网上很多也是老的内容了. ...
- 七. SpringCloud服务配置
1. SpringCloud Config概述 1.1 分布式系统面临的配置问题 微服务意味着要将单体应用中的业务拆分成一个一个子服务,每个服务的粒度相对较小,因此系统中会出现大量的服务.由于每个服务 ...
- 剑指 Offer 32 - I. 从上到下打印二叉树 + 层次遍历二叉树
剑指 Offer 32 - I. 从上到下打印二叉树 Offer_32_1 题目描述 解题思路 这题属于简单题,考察的是我们对二叉树以及层次遍历的方法. 这里只需要使用简单的队列即可完成二叉树的层次遍 ...
- golang-Zap和Go Logger日志库
目录 在Go语言项目中使用Zap日志库 介绍 默认的Go Logger日志库 实现Go Logger 设置Logger 使用Logger Logger的运行 Go Logger的优势和劣势 优势 劣势 ...
- Ubuntu 18.04下Intel SGX应用程序程序开发——获得OCALL调用的返回值
本文中,我们介绍在Enclave函数中调用不可信OCALL函数,并获得OCALL函数的返回值. 1. 复制SampleEnclave示例并建立自己的OcallRetSum项目 SampleEnclav ...
- ThinVnc-身份验证绕过(CVE-2019-17662)
ThinVnc-身份验证绕过(CVE-2019-17662) 简介 ThinVNC是一款以网页浏览器为基础设计的远端桌面连接工具,不局限用户端使用那种作业平台,都可以通过采用HTML5为标准的浏览器来 ...