当前位置：首页 > JavaScript

js 实现水印

2026-03-02 04:35:41JavaScript

实现水印的几种方法

使用Canvas生成水印

通过Canvas绘制水印文字或图片，转换为Base64后设置为背景。

function createWatermark(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 150;
  const ctx = canvas.getContext('2d');
  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(200, 200, 200, 0.3)';
  ctx.rotate(-0.3);
  ctx.fillText(text, 10, 100);
  return canvas.toDataURL('image/png');
}

document.body.style.backgroundImage = `url(${createWatermark('Watermark')})`;

使用CSS伪元素

通过CSS的::after或::before伪元素添加水印，适合简单场景。

const watermark = document.createElement('div');
watermark.className = 'watermark';
watermark.innerHTML = 'Watermark';
document.body.appendChild(watermark);

.watermark {
  position: fixed;
  opacity: 0.3;
  font-size: 50px;
  color: #cccccc;
  z-index: 9999;
  transform: rotate(-30deg);
  pointer-events: none;
}

使用SVG生成水印

SVG水印具有矢量特性，适合需要缩放的情况。

js 实现水印

function createSvgWatermark(text) {
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
      <text x="10" y="50" font-family="Arial" font-size="20" 
        fill="rgba(200,200,200,0.3)" transform="rotate(-30)">
        ${text}
      </text>
    </svg>`;
  return `data:image/svg+xml;base64,${btoa(svg)}`;
}

document.body.style.backgroundImage = `url("${createSvgWatermark('SVG Watermark')}")`;

防止水印被移除

MutationObserver监听DOM变化

通过监听DOM变化检测水印是否被移除。

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!document.querySelector('.watermark')) {
      createWatermark();
    }
  });
});

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

重复覆盖整个页面

创建多个水印元素覆盖整个页面，增加移除难度。

js 实现水印

function createFullPageWatermark(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.pointerEvents = 'none';
  container.style.zIndex = '9999';

  for (let i = 0; i < 100; i++) {
    const watermark = document.createElement('div');
    watermark.textContent = text;
    watermark.style.position = 'absolute';
    watermark.style.opacity = '0.1';
    watermark.style.transform = `rotate(-30deg)`;
    watermark.style.left = `${Math.random() * 100}%`;
    watermark.style.top = `${Math.random() * 100}%`;
    container.appendChild(watermark);
  }

  document.body.appendChild(container);
}

动态水印

绑定用户信息

将水印内容与用户信息绑定，增加溯源能力。

function createUserWatermark(userInfo) {
  const watermarkText = `${userInfo.name} ${userInfo.id}`;
  createWatermark(watermarkText);
}

周期性更新水印

定时更新水印内容或位置，防止被截图规避。

setInterval(() => {
  const watermarks = document.querySelectorAll('.watermark');
  watermarks.forEach(wm => {
    wm.style.left = `${Math.random() * 100}%`;
    wm.style.top = `${Math.random() * 100}%`;
  });
}, 5000);