JavaScript奇技淫巧：防刪水印

Shaman.com原創(chuàng)資料，作者：w3sft，如轉(zhuǎn)載請保留此信息。

為了保護版權(quán)、防截圖、防拍照等，有些我們會給網(wǎng)頁中的視頻、圖片或文字加水印。

實現(xiàn)的方式，可能有多種，比如：對圖片、視頻而言，可以在服務(wù)端完成水印，但對于文字信息類，一般只能在前端頁面中進行水印添加。

本文分享一種圖層式防刪水印技術(shù)。其效果是：在頁面渲染完成后，由JavaScript進行圖層水印添加，并會實時檢測水印狀態(tài)，如果水印被刪除、隱藏、或設(shè)置為透明，都會重置水印。

源碼

<html>
<body>
<div id="content" style="padding:10px;">
<h2>防刪文字水印</h2>
水印內(nèi)容不可刪除，如檢測到被刪除，會重新添加水印
</div>
<script>
    function add_water_canvas(){
        //水印canvas
        var water_canvas = document.createElement("canvas");
        water_canvas.id = "water_canvas";
        water_canvas.height = 100;
        water_canvas.width = 300;
        water_canvas.style.top = 100 + "px";
        water_canvas.style.left = 100 + "px";
        water_canvas.style.position = "absolute";
        water_canvas.style.transform = "rotate(-45deg)";
        //水印內(nèi)容
        var water_text = water_canvas.getContext("2d");
        water_text.font = "26px 黑體";
        water_text.fillText("水印內(nèi)容", 30, 50);
        //canvas容器：水印目標(biāo)
        var canvas_container = document.getElementById("content");
        canvas_container.style.height =  280 + "px";
        canvas_container.style.width = 500 + "px";
        canvas_container.style.backgroundImage = "url(bg.png)";
        //添加水印canvas給目標(biāo)div
        canvas_container.appendChild(water_canvas);
    }
    add_water_canvas();
    var observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
            if(mutation.removedNodes.length > 0 && mutation.removedNodes[0].id == "water_canvas") {
                console.log("檢測到水印被刪除，已重新添加水印");
                //重新添加水印
                add_water_canvas();
            }
            if (mutation.type == "attributes" && mutation.target.id == "water_canvas") {
                console.log("檢測到水印屬性被修改，已重置屬性");
                water_canvas.style.display = "block";
                water_canvas.style.opacity = 1;
            }
        });
    });
    observer.observe(document.body, {
        childList: true,
        attributes: true,
        subtree: true,
        attributesOldValue: true,
        characterData: true,
        characterDataOldValue: true,
    });
</script>
</body>
</html>

技術(shù)原理

添加水印的方式平平無奇，只是新建了一個canvas圖層，在圖層中疊加水印內(nèi)容。

取巧的是用MutationObserver對水印進行監(jiān)控和重置。MutationObserver是一個很有創(chuàng)意的接口，它可以監(jiān)聽頁面元素變化，任何元素的修改，如節(jié)點的增減、屬性值更新、文本內(nèi)容的改動都會觸發(fā)MutationObserve事件，在本例中，會監(jiān)測兩種事件：節(jié)點刪除、節(jié)點屬性發(fā)生變化。

如，刪除水印節(jié)點：

刪除時觸發(fā)事件，時此會還原節(jié)點、重置水印：

如，結(jié)點屬性被修改（修改display為none使元素不可見，或修改opacity為0使元素完全透明），都會觸監(jiān)聽事件，并重置節(jié)點屬性：

其實應(yīng)用于產(chǎn)品或項目時，可將JS代碼用JShaman進行混淆加密，以防止代碼被分析識破從而被針對性的反制。

注：本文演示中是給div添加水印，實際應(yīng)用此技術(shù)時，水印可添加給任意種類的元素內(nèi)容。

p-watermark.js網(wǎng)頁添加水印插件

作者：鵬仔先生

上周五，出差去改上個前端遺留的小問題，用到了watermark.js這個網(wǎng)站添加水印插件，功能很簡單，就是給網(wǎng)頁添加個水印，我看了下網(wǎng)上，有很多種，基本都是Canvas實現(xiàn)，我想要的是行與行之間交錯效果，可是沒有找到對應(yīng)文檔，看的煩的...

那就自己簡單寫個網(wǎng)頁添加水印插件吧， tp-watermark.js

身為初級前端，寫法比較low，但是功能很完善，請大家多多指導(dǎo)

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

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

下載完引入插件

使用水印

RemoveTpWatermark();

刪除水印

RemoveTpWatermark();

很方便使用，一列顯示幾行，一行顯示幾列都是計算的，大家不用自己定義（具體需要的參數(shù)已添加注釋）。

	// 添加水印方法
	function TpWatermark(CON,H,W,R,C,S,O) {
		// 判斷水印是否存在，如果存在，那么不執(zhí)行
		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(){
		// 判斷水印是否存在，如果存在，那么執(zhí)行
		if (document.getElementById('tp-watermark') == null) {
			return
		}
		document.body.removeChild(document.getElementById('tp-watermark'));
	}

頁面需要使用時

	// 執(zhí)行添加
	TpWatermark('水印','170','400','-20','red','70','.15');
	// TpWatermark(CON,H,W,R,C,S,O); // 值一一對應(yīng)

CON => 水印文字內(nèi)容
H => 水印行高
W => 水印寬度
R => 旋轉(zhuǎn)度數(shù)（可為負(fù)值）
C => 水印字體顏色
S => 水印字體的大小
O => 水印透明度（0~1之間取值）

頁面清除水印時

	// 執(zhí)行移除
	RemoveTpWatermark();

水印行與行之間需要交錯顯示，需添加css代碼(padding-left的交錯值，設(shè)置的水印寬度的一半即可)

/*通過此樣式，控制行與行之間的交錯顯示  為0則不交錯*/
#tp-watermark div:nth-child(2n){
	padding-left: 200px;
}

給鵬仔添加關(guān)注，后期版本會更新針對板塊來添加水印。

、代碼開發(fā)版實現(xiàn)方法

常規(guī)代碼實現(xiàn)思路是：

1）web 頁面加載后，通過 javascript 創(chuàng)建頁面元素 div，并在 div 元素中創(chuàng)建文本節(jié)點，展示水印內(nèi)容

2）設(shè)置 div 元素樣式，將其 zIndex 設(shè)置一個較高的值，并設(shè)置透明度，實現(xiàn)浮在頁面的水印效果

代碼開發(fā)時需要考慮頁面自適應(yīng)時寬高改變的情況，同時還需要保證不能影響頁面的原有事件功能，需要綜合考慮的細(xì)節(jié)比較多。

2、懶人版實現(xiàn)方法

使用內(nèi)置水印功能的報表工具，通過簡單屬性配置完成水印效果。

1）文字水印實現(xiàn)可以通過配置水印屬性：

文字要動態(tài)變化的話，只需要改為配置表達(dá)式就可以啦：

具體操作可以參考 http://c.raqsoft.com.cn/article/1567379764933

實現(xiàn)效果如下圖所示：

2）logo 水印在報表工具中的實現(xiàn)也很簡單，配置下圖片屬性就可以了：

具體操作可以參考 http://c.raqsoft.com.cn/article/1571639241616

實現(xiàn)效果如下圖所示：

使用報表工具不僅可以快速便捷的實現(xiàn)水印功能，還能給前端工程師帶來很多方便之處，例如一些前端效果（數(shù)據(jù)隔行異色顯示、點擊表頭排序等）可以直接使用工具實現(xiàn)，不用再寫前端代碼，減少了自己的代碼工作量；另外同時也避免了因為需求變更導(dǎo)致的代碼重新調(diào)整。

在線咨詢

上一篇：不要把“左上角”說成“l(fā)eft top corner”啊，因為你說反啦
下一篇：多用途游戲娛樂新聞網(wǎng)站HTML5模板

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商