js如何实现水印效果前端页面水印生成与防护方案-js教程-PHP中文网

js如何实现水印效果前端页面水印生成与防护方案

尼克

发布： 2025-07-01 18:57:01

原创

823人浏览过

前端水印的实现主要有两种思路：canvas和dom结构。1.canvas方式性能较好，适合批量生成水印，但内容难以被选中和复制；2.dom结构方式允许用户选中和复制水印内容，但性能相对较差且可能影响页面渲染。为了防止水印被移除，可以采用定时重绘、mutationobserver监听、服务端渲染水印、字体加密等方式。性能优化方面，canvas可通过减少元素数量和使用drawimage提升性能，dom可通过减少元素数量、css sprites、懒加载和虚拟dom优化。水印内容应动态化，结合用户信息由后端或前端生成。同时需平衡用户体验，控制透明度、位置和内容长度，避免影响阅读和视觉体验。

js如何实现水印效果前端页面水印生成与防护方案

前端水印，简单来说，就是在网页上加上一层肉眼可见的标记，表明版权或者其他信息。实现方式有很多，但核心都是在页面上“画”出来。

解决方案

实现水印效果，主要有两种思路：一是使用Canvas，二是利用DOM结构。Canvas的优势在于性能较好，可以批量生成水印，但缺点是水印内容难以被选中和复制。DOM结构的优势在于水印内容可以被选中和复制，方便用户操作，但缺点是性能相对较差，大量水印可能会影响页面渲染。

立即学习“前端免费学习笔记（深入）”；

Canvas实现水印

创建一个Canvas元素，设置其宽高与页面相同，并将其定位到页面的最顶层。
使用Canvas API，在Canvas上绘制水印文字或图片。可以设置水印的字体、颜色、大小、旋转角度等属性。
将Canvas元素添加到页面中。
监听页面的resize事件，当页面大小发生变化时，重新绘制水印，以保证水印的位置和大小始终与页面匹配。

function addWatermarkCanvas(text) {
  const canvas = document.createElement('canvas');
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
  canvas.style.position = 'fixed';
  canvas.style.top = '0';
  canvas.style.left = '0';
  canvas.style.zIndex = '9999';
  canvas.style.pointerEvents = 'none'; // 防止遮挡页面元素
  document.body.appendChild(canvas);

  const ctx = canvas.getContext('2d');
  ctx.font = '20px Microsoft YaHei';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.rotate(-20 * Math.PI / 180); // 旋转角度

  const x = canvas.width / 2;
  const y = canvas.height / 2;
  ctx.fillText(text, x, y);

  window.addEventListener('resize', () => {
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ctx.font = '20px Microsoft YaHei';
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.rotate(-20 * Math.PI / 180);
    ctx.fillText(text, x, y);
  });
}

addWatermarkCanvas('版权所有');

登录后复制

DOM结构实现水印

创建一个包含水印文字或图片的DOM元素。
设置DOM元素的样式，使其定位到页面的指定位置，并设置透明度。
将DOM元素添加到页面中。
重复步骤1-3，创建多个水印元素，并将它们添加到页面的不同位置，以实现水印的平铺效果。
监听页面的resize事件，当页面大小发生变化时，重新计算水印元素的位置，以保证水印的位置始终与页面匹配。

function addWatermarkDOM(text) {
  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.top = '0';
  container.style.left = '0';
  container.style.width = '100%';
  container.style.height = '100%';
  container.style.zIndex = '9999';
  container.style.pointerEvents = 'none';
  document.body.appendChild(container);

  const watermark = document.createElement('div');
  watermark.style.position = 'absolute';
  watermark.style.top = '50%';
  watermark.style.left = '50%';
  watermark.style.transform = 'translate(-50%, -50%) rotate(-20deg)';
  watermark.style.fontSize = '20px';
  watermark.style.color = 'rgba(0, 0, 0, 0.2)';
  watermark.textContent = text;
  container.appendChild(watermark);

  // 平铺水印
  const num = 5; // 水印数量
  for (let i = 0; i < num; i++) {
      for (let j = 0; j < num; j++) {
          if (i === 0 && j === 0) continue; // 避免重复添加
          const newWatermark = watermark.cloneNode(true);
          newWatermark.style.top = `${(i / num) * 100}%`;
          newWatermark.style.left = `${(j / num) * 100}%`;
          container.appendChild(newWatermark);
      }
  }

  window.addEventListener('resize', () => {
    // 重新计算水印位置，这里省略具体实现
  });
}

addWatermarkDOM('版权所有');

登录后复制

如何防止水印被移除？

水印的防护，是个猫鼠游戏。完全防止被移除是不可能的，只能增加移除的难度。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

Canvas水印： 可以通过定时器不断重绘水印，即使被移除，也会很快恢复。还可以监听MutationObserver，当Canvas元素被修改或移除时，重新创建水印。
DOM水印： 同样可以使用定时器不断添加水印元素。也可以监听MutationObserver，当水印元素被修改或移除时，重新创建水印。
服务端渲染水印： 在服务端生成带有水印的图片，然后将图片返回给前端。这种方式可以有效地防止水印被移除，但会增加服务器的压力。
字体加密： 自定义字体，将水印文字嵌入到字体文件中。这样，即使有人想要移除水印，也需要先破解字体文件。

水印的性能优化

大量水印会影响页面性能，需要进行优化。

Canvas水印： 减少Canvas元素的数量，尽量在一个Canvas元素上绘制所有的水印。使用drawImage方法绘制水印图片，而不是fillText方法绘制水印文字，可以提高性能。
DOM水印： 减少DOM元素的数量，尽量使用CSS样式来控制水印的位置和大小。使用CSS Sprites技术，将多个水印图片合并成一个图片，可以减少HTTP请求。
懒加载水印： 只在用户滚动到页面底部时才加载水印。
虚拟DOM： 使用虚拟DOM技术，可以减少DOM操作的次数，提高页面渲染性能。

水印内容动态化

水印内容不应该是静态的，可以根据用户的登录状态、IP地址等信息动态生成。