用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小時內與您取得聯系。

整合營銷服務商