当前位置：首页 > JavaScript

js实现水印

2026-03-02 05:58:40JavaScript

使用Canvas绘制水印

在HTML中创建一个Canvas元素，通过JavaScript绘制文本或图片作为水印。Canvas提供了灵活的控制方式，可以调整水印的透明度、旋转角度和位置。

function createWatermark(text) {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  canvas.height = 100;
  const ctx = canvas.getContext('2d');

  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(200, 200, 200, 0.5)';
  ctx.rotate(-0.2);
  ctx.fillText(text, 10, 50);

  return canvas.toDataURL();
}

const watermark = document.createElement('div');
watermark.style.position = 'fixed';
watermark.style.top = '0';
watermark.style.left = '0';
watermark.style.width = '100%';
watermark.style.height = '100%';
watermark.style.pointerEvents = 'none';
watermark.style.backgroundImage = `url(${createWatermark('Confidential')})`;
watermark.style.backgroundRepeat = 'repeat';

document.body.appendChild(watermark);

使用CSS伪元素添加水印

通过CSS的::after或::before伪元素实现简单水印效果，适合不需要复杂样式的水印场景。这种方法性能较好，但自定义程度有限。

const style = document.createElement('style');
style.innerHTML = `
  body::after {
    content: "Watermark Text";
    position: fixed;
    opacity: 0.2;
    font-size: 50px;
    color: #cccccc;
    z-index: 9999;
    transform: rotate(-30deg);
    pointer-events: none;
    left: 30%;
    top: 40%;
  }
`;
document.head.appendChild(style);

SVG背景水印方案

使用SVG创建可缩放的水印图形，特别适合需要高清晰度显示的场景。SVG水印可以完美适应不同屏幕尺寸而不失真。

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

const watermarkDiv = document.createElement('div');
watermarkDiv.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url("${createSvgWatermark('SECRET')}");
  background-repeat: repeat;
  z-index: 9999;
`;
document.body.appendChild(watermarkDiv);

防删除水印实现

为了防止用户通过开发者工具删除水印元素，可以采用MutationObserver监听DOM变化，当水印被移除时自动重新添加。

const watermark = document.createElement('div');
watermark.id = '__watermark__';
// 设置水印样式...

document.body.appendChild(watermark);

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!document.getElementById('__watermark__')) {
      document.body.appendChild(watermark);
    }
  });
});

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

动态水印方案

结合用户信息生成个性化水印，通常用于内部系统追踪信息泄露来源。水印内容可以包含用户ID、时间戳等唯一标识信息。

function generateDynamicWatermark(userId) {
  const now = new Date();
  const watermarkText = `${userId} ${now.toISOString()}`;

  const pattern = document.createElement('canvas');
  pattern.width = 200;
  pattern.height = 100;
  const pctx = pattern.getContext('2d');

  pctx.font = '12px Arial';
  pctx.fillStyle = 'rgba(100,100,100,0.2)';
  pctx.fillText(watermarkText, 10, 20);

  const div = document.createElement('div');
  div.style.position = 'fixed';
  div.style.top = '0';
  div.style.left = '0';
  div.style.width = '100%';
  div.style.height = '100%';
  div.style.pointerEvents = 'none';
  div.style.backgroundImage = `url(${pattern.toDataURL()})`;
  div.style.backgroundRepeat = 'repeat';

  return div;
}

document.body.appendChild(generateDynamicWatermark('user123'));

js实现水印