用js实现html页面水印

js实现html页面水印

要在 HTML 页面中添加水印并防止截图，可以使用 JavaScript。以下是实现的基本步骤：

1、在 HTML 中添加一个 div 元素作为水印容器，并设置其样式。

2、使用 JavaScript 动态生成水印内容，并将其添加到水印容器中。

3、通过 CSS 设置水印文本的样式，例如颜色、字体大小等。

4、使用 CSS 将水印容器置于所有其他元素的最顶层，从而覆盖整个页面。

5、监听窗口的 resize 和 scroll 事件，以便及时更新水印位置。

6、使用 Canvas 绘制图片或者使用 CSS 的 mix-blend-mode 属性来实现防截图效果。

下面是一个示例代码片段：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Watermark Example</title>
<style>
#watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}

#watermark span {
font-size: 24px;
color: #ccc;
position: absolute;
transform: rotate(-30deg);
padding:100px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="watermark"></div>
<script>
function createWatermark() {
var watermark = document.getElementById('watermark');
var angle = -30;
var top = -30;
var text = 'My Watermark';

for (var i = 0; i < 10; i++) {
var span = document.createElement('span');
span.style.left = i * 200 + 'px';
span.style.top = i * top + 'px';
span.style.webkitTransform = 'rotate(' + angle + 'deg)';
span.style.MozTransform = 'rotate(' + angle + 'deg)';
span.style.msTransform = 'rotate(' + angle + 'deg)';
span.style.OTransform = 'rotate(' + angle + 'deg)';
span.style.transform = 'rotate(' + angle + 'deg)';
span.appendChild(document.createTextNode(text));
watermark.appendChild(span);
angle += 15;
top += 15;
}
}

createWatermark();

window.addEventListener('resize', function() {
createWatermark();
});

window.addEventListener('scroll', function() {
createWatermark();
});

// 防截图
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'fixed';
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.pointerEvents = 'none';
canvas.style.mixBlendMode = 'multiply';
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>

这个示例代码添加了一个水印容器，并在其中添加了一些旋转的文本。使用 CSS 将水印容器置于最顶层，并禁用了其指针事件，以防止干扰用户操作。同时在窗口 resize 和 scroll 事件中更新水印位置，以适应页面变化。

如果想保护上面的JavaScript代码逻辑，可以用JShaman进行JavaScript代码混淆加密，加密后的代码不可读、可起到防分析的作用。

此外，这个示例代码还使用 Canvas 绘制了一个与页面大小相同的黑色矩形，并将其与水印容器叠加在一起。由于 mix-blend-mode 属性的作用，截图时就无法完整地复制水印文本，从而达到防截图的效果。

效果：

p-watermark.js网页添加水印插件

作者：鹏仔先生

上周五，出差去改上个前端遗留的小问题，用到了watermark.js这个网站添加水印插件，功能很简单，就是给网页添加个水印，我看了下网上，有很多种，基本都是Canvas实现，我想要的是行与行之间交错效果，可是没有找到对应文档，看的烦的...

那就自己简单写个网页添加水印插件吧， tp-watermark.js

身为初级前端，写法比较low，但是功能很完善，请大家多多指导

下载插件：https://qzhan.lanzous.com/iP9effhq7af

DEMO下载：https://qzhan.lanzous.com/i7le1fhq7lg

下载完引入插件

使用水印

RemoveTpWatermark();

删除水印

RemoveTpWatermark();

很方便使用，一列显示几行，一行显示几列都是计算的，大家不用自己定义（具体需要的参数已添加注释）。

	// 添加水印方法
	function TpWatermark(CON,H,W,R,C,S,O) {
		// 判断水印是否存在，如果存在，那么不执行
		if (document.getElementById('tp-watermark') != null) {
			return
		}
		var TpLine = parseInt(document.body.clientWidth/W) * 2; // 一行显示几列
		var StrLine = '';
		for(var i = 0; i < TpLine; i++){
			StrLine += '<span style="display: inline-block; line-height:' + H + 'px; width:' + W + 'px; text-align: center; transform:rotate(' + R + 'deg); color:' + C + '; font-size:'+ S + 'px; opacity:' + O + ';">'+ CON +'</span>'
		}
		var DivLine = document.createElement("div");
			DivLine.innerHTML = StrLine;

		var TpColumn = parseInt(document.body.clientHeight/H) * 2; // 一列显示几行
		var StrColumn = '';
		for(var i = 0; i < TpColumn; i++){
			StrColumn += '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
		}
		var DivLayer = document.createElement("div");
			DivLayer.innerHTML = StrColumn;
			DivLayer.id = "tp-watermark"; // 给水印盒子添加类名
			DivLayer.style.position = "fixed";
			DivLayer.style.top = "0px"; // 整体水印距离顶部距离
			DivLayer.style.left = "-100px"; // 改变整体水印的left值
			DivLayer.style.zIndex = "99999"; // 水印页面层级
			DivLayer.style.pointerEvents = "none";

		document.body.appendChild(DivLayer); // 到页面中
	}

	// 移除水印方法
	function RemoveTpWatermark(){
		// 判断水印是否存在，如果存在，那么执行
		if (document.getElementById('tp-watermark') == null) {
			return
		}
		document.body.removeChild(document.getElementById('tp-watermark'));
	}

页面需要使用时

	// 执行添加
	TpWatermark('水印','170','400','-20','red','70','.15');
	// TpWatermark(CON,H,W,R,C,S,O); // 值一一对应

CON => 水印文字内容
H => 水印行高
W => 水印宽度
R => 旋转度数（可为负值）
C => 水印字体颜色
S => 水印字体的大小
O => 水印透明度（0~1之间取值）

页面清除水印时

	// 执行移除
	RemoveTpWatermark();

水印行与行之间需要交错显示，需添加css代码(padding-left的交错值，设置的水印宽度的一半即可)

/*通过此样式，控制行与行之间的交错显示  为0则不交错*/
#tp-watermark div:nth-child(2n){
	padding-left: 200px;
}

给鹏仔添加关注，后期版本会更新针对板块来添加水印。

着互联网的普及和发展，前端页面水印技术也得到了广泛的应用。在数字化时代，水印技术已成为保护知识产权和防止伪造的重要手段之一。本文将介绍前端页面水印的基本原理、技术方法和实际应用，并提供一个基于HTML5和JavaScript的简单水印实现。

一、基本原理

水印（Watermark）是指在某些特定材质或图像中隐藏信息，这些信息在普通观察下不易被发现，但在特殊条件下会显现出来。在前端页面中，水印技术主要应用于图像、文字、视频等多媒体内容，通过修改内容的某些属性，以达到防止伪造和保护知识产权的目的。

二、技术方法

图像水印

图像水印是指在图像中隐藏信息，可以在不破坏图像原始内容的情况下实现。常见的技术包括频域滤波、小波变换、分形等。实现图像水印需要具备一定的数字图像处理知识。

文字水印

文字水印是指在文本中隐藏信息。可以通过修改字体、颜色、透明度等属性来实现。在HTML中，可以使用CSS样式和JavaScript来修改文字属性，实现文字水印。

视频水印

视频水印是指在视频流中隐藏信息。与图像水印类似，视频水印也需要数字图像处理技术的支持。实现视频水印需要对视频编解码技术有一定的了解。

三、实际应用

版权保护

在数字图像和视频的传输过程中，可能会发生侵权行为。通过在原始内容中添加水印，可以在发生版权纠纷时证明版权归属。

防伪造

利用水印技术可以防止伪造货币、证件等重要文件。在制作文件时，将特定信息添加到文件中，可以在验证文件真伪时提供有力证据。

票据防伪

在金融、税务等领域，电子票据的防伪问题一直是行业痛点。通过在票据中添加水印，可以有效防止伪造票据。

四、基于HTML5和JavaScript的水印实现

下面是一个基于HTML5和JavaScript的简单水印实现：

准备一张带有水印的图片（watermark.png），设置透明度并放置在页面中。

在CSS中定义水印样式：

css

.watermark {

position: fixed;

left: 0;

top: 0;

opacity: 0.5;

}

在HTML中添加以下代码：

html

在JavaScript中，可以通过修改图片的透明度来实现动态水印效果：

javascript

function setWatermarkOpacity(opacity) {

var watermark = document.querySelector('.watermark');

watermark.style.opacity = opacity;

}

// 设置初始透明度为0.5

setWatermarkOpacity(0.5);

通过以上代码，即可在前端页面中实现简单的动态水印效果。需要注意的是，该方法仅适用于静态内容，对于动态内容和交互式内容，需要采用更复杂的技术来实现水印效果。

在线咨询

上一篇：javascript 获取网页各种宽度
下一篇："揭秘HTML标签中的伪元素与伪类：它们的区别及应用场景深

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商