js怎样实现水印添加功能页面水印添加的3种技术方案-小浪学习网

实现页面水印添加的核心是通过JavaScript操作dom，将水印元素叠加在页面上。1. 纯javascript+css方案：创建div元素并设置样式使其半透明、倾斜并定位在页面中央，优点简单易用，缺点是适应性和安全性较差；2. canvas方案：利用canvas绘制复杂水印如动态或图片水印，优点灵活但性能较低；3. svg方案：使用矢量图形确保清晰度且适应分辨率，代码较复杂。为提升安全性，可采用动态变化、平铺水印、服务器端渲染及监听dom变化等手段。性能优化包括减少数量、简化样式、缓存静态水印和异步加载。适配不同分辨率可通过百分比定位、媒体查询和动态计算实现。选择方案应根据需求权衡功能、安全与性能。

js怎样实现水印添加功能页面水印添加的3种技术方案

实现页面水印添加，核心在于利用JavaScript操作DOM，将水印元素巧妙地叠加在页面之上。这既可以有效防止内容盗用，又不会过度干扰用户体验。

js怎样实现水印添加功能页面水印添加的3种技术方案

解决方案

水印添加的本质就是创建一个或多个视觉元素，并将它们以特定的方式固定在页面的特定位置。我们可以使用纯JavaScript、Canvas或者SVG来实现。

js怎样实现水印添加功能页面水印添加的3种技术方案

方案一：纯JavaScript + css

js怎样实现水印添加功能页面水印添加的3种技术方案

这是最简单直接的方法。创建一个包含水印文本的div元素，设置其样式使其半透明、倾斜，并将其定位到页面的合适位置。

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('版权所有 © Your Company');

这种方法的优点是简单易懂，兼容性好。缺点是水印位置固定，可能在不同分辨率的屏幕上显示效果不佳。而且，容易被用户通过开发者工具移除。

方案二：Canvas水印

使用Canvas绘制水印，可以实现更复杂的水印效果，例如图片水印、动态水印等。

function addCanvasWatermark(text) {   const canvas = document.createElement('canvas');   canvas.width = 500; // 根据水印内容调整   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('版权所有 © Your Company');

Canvas水印的优点是灵活性高，可以自定义水印样式。缺点是性能相对较低，特别是水印内容复杂时。

方案三：SVG水印

SVG水印结合了矢量图形的优势，可以实现清晰度更高的水印效果，且在不同分辨率下表现良好。

function addSvgWatermark(text) {   const svgNS = "http://www.w3.org/2000/svg";   const svg = document.createElementNS(svgNS, "svg");   svg.setAttribute("width", "500"); // 根据水印内容调整   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('版权所有 © Your Company');

SVG水印的优点是矢量图形，清晰度高，性能较好。缺点是代码相对复杂一些。