JS实现网页水印，这三种方案赶紧收藏！

想为你的网页添加水印，防止内容被盗用吗？本文为你提供三种基于JavaScript的技术方案，助你轻松实现网页水印添加！这三种方案分别是：**纯JavaScript+CSS方案**、**Canvas方案**和**SVG方案**。纯JavaScript+CSS方案简单易用，但适应性和安全性较差；Canvas方案可绘制复杂水印，但性能较低；SVG方案则能保证水印清晰度，但代码相对复杂。文章还将深入探讨如何提升水印安全性，优化性能，以及适配不同分辨率，帮助你根据实际需求选择最佳方案，为你的网页保驾护航。快来收藏这篇实用教程吧！

实现页面水印添加的核心是通过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方案。同时，需要注意水印的安全性、性能和适应性，以提供更好的用户体验。

到这里，我们也就讲完了《JS实现网页水印，这三种方案赶紧收藏！》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,安全性,水印,Canvas,SVG的知识点！