实现页面水印添加的核心是通过javascript操作dom，将水印元素叠加在页面上。1. 纯javascript+css方案：创建div元素并设置样式使其半透明、倾斜并定位在页面中央，优点简单易用，缺点是适应性和安全性较差；2. canvas方案：利用canvas绘制复杂水印如动态或图片水印，优点灵活但性能较低；3. svg方案：使用矢量图形确保清晰度且适应分辨率，代码较复杂。为提升安全性，可采用动态变化、平铺水印、服务器端渲染及监听dom变化等手段。性能优化包括减少数量、简化样式、缓存静态水印和异步加载。适配不同分辨率可通过百分比定位、媒体查询和动态计算实现。选择方案应根据需求权衡功能、安全与性能。
实现页面水印添加，核心在于利用JavaScript操作DOM，将水印元素巧妙地叠加在页面之上。这既可以有效防止内容盗用，又不会过度干扰用户体验。
解决方案
水印添加的本质就是创建一个或多个视觉元素，并将它们以特定的方式固定在页面的特定位置。我们可以使用纯JavaScript、Canvas或者SVG来实现。
方案一：纯JavaScript + CSS
这是最简单直接的方法。创建一个包含水印文本的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水印的优点是矢量图形，清晰度高，性能较好。缺点是代码相对复杂一些。
如何防止水印被轻易移除？
水印的安全性是一个重要的考虑因素。虽然无法完全防止水印被移除，但可以采取一些措施来增加移除的难度：
- 动态水印： 水印的位置、颜色、透明度等参数可以动态变化，增加移除的难度。
- 水印平铺： 在页面上平铺多个水印，即使移除一个，仍然有其他水印存在。
- 服务器端渲染： 将水印添加到图片或页面内容中，在服务器端完成渲染，客户端无法轻易修改。
- MutationObserver： 监听DOM变化，一旦水印被移除，立即重新添加。但这会影响性能，需要谨慎使用。
如何优化水印的性能？
水印的添加可能会影响页面的性能，特别是Canvas水印。以下是一些优化建议：
- 减少水印数量： 尽量减少页面上的水印数量，避免过度使用。
- 简化水印样式： 避免使用过于复杂的水印样式，例如复杂的渐变、阴影等。
- 使用缓存： 对于静态水印，可以将其缓存起来，避免重复渲染。
-
异步添加： 使用
setTimeout或requestAnimationFrame将水印的添加操作放到异步队列中，避免阻塞主线程。
如何让水印适应不同的屏幕分辨率？
为了让水印在不同的屏幕分辨率下都能正常显示，可以使用以下方法：
- 百分比定位： 使用百分比来设置水印的位置，使其相对于屏幕大小进行调整。
- 媒体查询： 使用CSS媒体查询来根据不同的屏幕尺寸调整水印的样式。
- 动态计算： 使用JavaScript动态计算水印的位置和大小，使其适应屏幕大小。
选择哪种方案取决于具体的需求和场景。如果只需要简单的文本水印，纯JavaScript + CSS方案就足够了。如果需要更复杂的水印效果，可以考虑Canvas或SVG方案。同时，需要注意水印的安全性、性能和适应性，以提供更好的用户体验。
