当前位置：首页 > JavaScript

js 实现水印功能

2026-04-07 17:40:07JavaScript

实现水印功能的几种方法

使用Canvas绘制水印

通过Canvas动态生成水印图片，将其作为背景或覆盖层添加到页面上。

function createWatermark(text, options = {}) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const fontSize = options.fontSize || 16;
  const fontFamily = options.fontFamily || 'Arial';
  const color = options.color || 'rgba(200, 200, 200, 0.3)';
  const angle = options.angle || -20;
  const spacing = options.spacing || 100;

  canvas.width = 400;
  canvas.height = 200;
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate((angle * Math.PI) / 180);
  ctx.fillText(text, 0, 0);

  return canvas.toDataURL();
}

function applyWatermark(containerSelector, text) {
  const container = document.querySelector(containerSelector);
  const watermarkUrl = createWatermark(text);
  container.style.backgroundImage = `url(${watermarkUrl})`;
  container.style.backgroundRepeat = 'repeat';
}

使用CSS伪元素添加水印

通过CSS的::after或::before伪元素实现简单的水印效果。

function addCssWatermark(text, options = {}) {
  const style = document.createElement('style');
  const color = options.color || 'rgba(200, 200, 200, 0.3)';
  const fontSize = options.fontSize || '20px';

  style.textContent = `
    body::after {
      content: "${text}";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: ${fontSize};
      color: ${color};
      z-index: 9999;
      transform: rotate(-30deg);
    }
  `;
  document.head.appendChild(style);
}

防止水印被移除的保护措施

增加MutationObserver监听DOM变化，当水印被移除时自动重新添加。

function protectWatermark(watermarkElement) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (!document.body.contains(watermarkElement)) {
        document.body.appendChild(watermarkElement);
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 使用示例
const watermark = document.createElement('div');
watermark.textContent = 'Confidential';
watermark.style.position = 'fixed';
watermark.style.zIndex = '9999';
document.body.appendChild(watermark);
protectWatermark(watermark);

SVG水印实现

使用SVG创建更灵活的水印效果，支持复杂图形和更好的缩放。

js 实现水印功能

function createSvgWatermark(text, options = {}) {
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
      <text x="50%" y="50%" 
            font-family="${options.fontFamily || 'Arial'}" 
            font-size="${options.fontSize || '20'}" 
            fill="${options.color || 'rgba(200,200,200,0.3)'}" 
            text-anchor="middle" 
            dominant-baseline="middle"
            transform="rotate(-30, 150, 100)">
        ${text}
      </text>
    </svg>
  `;
  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`;
}

每种方法适用于不同场景，Canvas适合需要动态生成的水印，CSS方法最简单，SVG提供最好的清晰度，保护措施可以防止简单的前端篡改。可以根据实际需求选择合适的方法或组合使用。