整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          用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

          <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);

          通過以上代碼,即可在前端頁面中實現簡單的動態水印效果。需要注意的是,該方法僅適用于靜態內容,對于動態內容和交互式內容,需要采用更復雜的技術來實現水印效果。


          主站蜘蛛池模板: 国产成人av一区二区三区不卡| 无码国产精品一区二区免费模式 | 伊人精品视频一区二区三区| 日韩人妻精品无码一区二区三区 | 久久久精品一区二区三区| 麻豆国产在线不卡一区二区| 亚洲国产情侣一区二区三区| 日韩一区二区三区无码影院| 国产一区二区精品尤物| 无码人妻精品一区二区三区99不卡| 国产美女一区二区三区| 国产精品分类视频分类一区| 色国产精品一区在线观看| 久久久一区二区三区| 无码午夜人妻一区二区三区不卡视频| 麻豆视传媒一区二区三区| 国产成人一区二区三区免费视频 | 日韩精品无码一区二区三区免费| 中文字幕一区二区三区在线播放 | 免费一本色道久久一区| 精品国产乱子伦一区二区三区| 亚洲一区二区三区无码国产| 精品一区精品二区制服| 麻豆果冻传媒2021精品传媒一区下载| 久久精品免费一区二区| 大香伊人久久精品一区二区| 无码国产精品一区二区免费I6| 国产av一区最新精品| 福利一区在线视频| 国产福利电影一区二区三区久久久久成人精品综合 | 日韩一区二区三区射精| 日韩精品一区二区三区中文版 | 午夜天堂一区人妻| 亚洲AV成人一区二区三区在线看| 亚洲一区二区三区高清在线观看| 在线欧美精品一区二区三区| 国产成人av一区二区三区在线| 国产精品区AV一区二区| 天堂资源中文最新版在线一区| 亚洲色精品三区二区一区| 精品一区二区三区电影|