js怎样实现水印添加功能页面水印添加的3种技术方案-js教程-PHP中文网

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

冰火之心

发布： 2025-06-30 17:39:02

原创

832人浏览过

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

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

实现页面水印添加，核心在于利用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水印的优点是灵活性高，可以自定义水印样式。缺点是性能相对较低，特别是水印内容复杂时。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

方案三：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水印的优点是矢量图形，清晰度高，性能较好。缺点是代码相对复杂一些。