JS实现水印效果，页面水印生成与防护技巧

本篇文章向大家介绍《JS实现水印效果，前端页面水印生成与防护方法》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

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

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

解决方案

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

Canvas实现水印

1. 创建一个Canvas元素，设置其宽高与页面相同，并将其定位到页面的最顶层。
2. 使用Canvas API，在Canvas上绘制水印文字或图片。可以设置水印的字体、颜色、大小、旋转角度等属性。
3. 将Canvas元素添加到页面中。
4. 监听页面的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结构实现水印

1. 创建一个包含水印文字或图片的DOM元素。
2. 设置DOM元素的样式，使其定位到页面的指定位置，并设置透明度。
3. 将DOM元素添加到页面中。
4. 重复步骤1-3，创建多个水印元素，并将它们添加到页面的不同位置，以实现水印的平铺效果。
5. 监听页面的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('版权所有');

如何防止水印被移除？

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

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

水印的性能优化

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

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

水印内容动态化

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

• 后端生成水印内容： 将用户信息传递给后端，由后端生成水印内容，然后将水印内容返回给前端。
• 前端动态生成水印内容： 在前端获取用户信息，然后使用JavaScript动态生成水印内容。

水印与用户体验

水印虽然可以保护版权，但也会影响用户体验。 需要在保护版权和用户体验之间找到平衡。

• 水印的透明度： 水印的透明度不宜过高，以免影响用户的阅读体验。
• 水印的位置： 水印的位置不宜过于显眼，以免影响用户的视觉体验。
• 水印的内容： 水印的内容不宜过于冗长，以免影响用户的阅读体验。

总的来说，实现前端水印是一个平衡的过程，需要在安全性、性能和用户体验之间做出权衡。 没有完美的解决方案，只有最适合你的方案。

终于介绍完啦！小伙伴们，这篇关于《JS实现水印效果，页面水印生成与防护技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！