整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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 屬性的作用，截圖時就無法完整地復制水印文本，從而達到防截圖的效果。
效果：
上周五，出差去改上個前端遺留的小問題，用到了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
<img src="watermark.png" class="watermark">
在JavaScript中，可以通過修改圖片的透明度來實現動態水印效果：
javascript
function setWatermarkOpacity(opacity) {
var watermark = document.querySelector('.watermark');
watermark.style.opacity = opacity;
}
// 設置初始透明度為0.5
setWatermarkOpacity(0.5);
通過以上代碼，即可在前端頁面中實現簡單的動態水印效果。需要注意的是，該方法僅適用于靜態內容，對于動態內容和交互式內容，需要采用更復雜的技術來實現水印效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
