實現(xiàn)頁面水印添加的核心是通過JavaScript操作dom，將水印元素疊加在頁面上。1. 純javascript+css方案：創(chuàng)建div元素并設(shè)置樣式使其半透明、傾斜并定位在頁面中央，優(yōu)點簡單易用，缺點是適應(yīng)性和安全性較差；2. canvas方案：利用canvas繪制復(fù)雜水印如動態(tài)或圖片水印，優(yōu)點靈活但性能較低；3. svg方案：使用矢量圖形確保清晰度且適應(yīng)分辨率，代碼較復(fù)雜。為提升安全性，可采用動態(tài)變化、平鋪水印、服務(wù)器端渲染及監(jiān)聽dom變化等手段。性能優(yōu)化包括減少數(shù)量、簡化樣式、緩存靜態(tài)水印和異步加載。適配不同分辨率可通過百分比定位、媒體查詢和動態(tài)計算實現(xiàn)。選擇方案應(yīng)根據(jù)需求權(quán)衡功能、安全與性能。
實現(xiàn)頁面水印添加，核心在于利用JavaScript操作DOM，將水印元素巧妙地疊加在頁面之上。這既可以有效防止內(nèi)容盜用，又不會過度干擾用戶體驗。
解決方案
水印添加的本質(zhì)就是創(chuàng)建一個或多個視覺元素，并將它們以特定的方式固定在頁面的特定位置。我們可以使用純JavaScript、Canvas或者SVG來實現(xiàn)。
方案一：純JavaScript + css
這是最簡單直接的方法。創(chuàng)建一個包含水印文本的div元素，設(shè)置其樣式使其半透明、傾斜，并將其定位到頁面的合適位置。
function addWatermark(text) { const watermarkDiv = document.createElement('div'); watermarkDiv.style.position = 'fixed'; watermarkDiv.style.top = '50%'; watermarkDiv.style.left = '50%'; watermarkDiv.style.transform = 'translate(-50%, -50%) rotate(-45deg)'; watermarkDiv.style.fontSize = '20px'; watermarkDiv.style.color = 'rgba(0, 0, 0, 0.3)'; watermarkDiv.style.zIndex = '9999'; // 確保水印在最上層 watermarkDiv.style.userSelect = 'none'; // 禁止用戶選擇水印 watermarkDiv.textContent = text; document.body.appendChild(watermarkDiv); } addWatermark('版權(quán)所有 ? Your Company');
這種方法的優(yōu)點是簡單易懂，兼容性好。缺點是水印位置固定，可能在不同分辨率的屏幕上顯示效果不佳。而且，容易被用戶通過開發(fā)者工具移除。
方案二：Canvas水印
使用Canvas繪制水印，可以實現(xiàn)更復(fù)雜的水印效果，例如圖片水印、動態(tài)水印等。
function addCanvasWatermark(text) { const canvas = document.createElement('canvas'); canvas.width = 500; // 根據(jù)水印內(nèi)容調(diào)整 canvas.height = 200; canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.zIndex = '9999'; canvas.style.pointerEvents = 'none'; // 防止水印遮擋頁面元素 const ctx = canvas.getContext('2d'); ctx.font = '20px Arial'; ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'; ctx.rotate(-0.2); // 傾斜角度 ctx.fillText(text, 50, 100); document.body.appendChild(canvas); } addCanvasWatermark('版權(quán)所有 ? Your Company');
Canvas水印的優(yōu)點是靈活性高，可以自定義水印樣式。缺點是性能相對較低，特別是水印內(nèi)容復(fù)雜時。
方案三：SVG水印
SVG水印結(jié)合了矢量圖形的優(yōu)勢，可以實現(xiàn)清晰度更高的水印效果，且在不同分辨率下表現(xiàn)良好。
function addSvgWatermark(text) { const svgNS = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("width", "500"); // 根據(jù)水印內(nèi)容調(diào)整 svg.setAttribute("height", "200"); svg.style.position = "fixed"; svg.style.top = "0"; svg.style.left = "0"; svg.style.zIndex = "9999"; svg.style.pointerEvents = "none"; const textElement = document.createElementNS(svgNS, "text"); textElement.setAttribute("x", "50"); textElement.setAttribute("y", "100"); textElement.setAttribute("font-size", "20"); textElement.setAttribute("fill", "rgba(0, 0, 0, 0.3)"); textElement.setAttribute("transform", "rotate(-10)"); // 傾斜角度 textElement.textContent = text; svg.appendChild(textElement); document.body.appendChild(svg); } addSvgWatermark('版權(quán)所有 ? Your Company');
SVG水印的優(yōu)點是矢量圖形，清晰度高，性能較好。缺點是代碼相對復(fù)雜一些。
如何防止水印被輕易移除？
水印的安全性是一個重要的考慮因素。雖然無法完全防止水印被移除，但可以采取一些措施來增加移除的難度：
- 動態(tài)水印： 水印的位置、顏色、透明度等參數(shù)可以動態(tài)變化，增加移除的難度。
- 水印平鋪： 在頁面上平鋪多個水印，即使移除一個，仍然有其他水印存在。
- 服務(wù)器端渲染： 將水印添加到圖片或頁面內(nèi)容中，在服務(wù)器端完成渲染，客戶端無法輕易修改。
- MutationObserver： 監(jiān)聽DOM變化，一旦水印被移除，立即重新添加。但這會影響性能，需要謹慎使用。
如何優(yōu)化水印的性能？
水印的添加可能會影響頁面的性能，特別是Canvas水印。以下是一些優(yōu)化建議：
- 減少水印數(shù)量： 盡量減少頁面上的水印數(shù)量，避免過度使用。
- 簡化水印樣式： 避免使用過于復(fù)雜的水印樣式，例如復(fù)雜的漸變、陰影等。
- 使用緩存： 對于靜態(tài)水印，可以將其緩存起來，避免重復(fù)渲染。
- 異步添加： 使用setTimeout或requestAnimationFrame將水印的添加操作放到異步隊列中，避免阻塞主線程。
如何讓水印適應(yīng)不同的屏幕分辨率？
為了讓水印在不同的屏幕分辨率下都能正常顯示，可以使用以下方法：
- 百分比定位： 使用百分比來設(shè)置水印的位置，使其相對于屏幕大小進行調(diào)整。
- 媒體查詢： 使用CSS媒體查詢來根據(jù)不同的屏幕尺寸調(diào)整水印的樣式。
- 動態(tài)計算： 使用JavaScript動態(tài)計算水印的位置和大小，使其適應(yīng)屏幕大小。
選擇哪種方案取決于具體的需求和場景。如果只需要簡單的文本水印，純JavaScript + CSS方案就足夠了。如果需要更復(fù)雜的水印效果，可以考慮Canvas或SVG方案。同時，需要注意水印的安全性、性能和適應(yīng)性，以提供更好的用戶體驗。
