js实现水印

使用Canvas绘制水印

通过Canvas动态生成水印图案，再将其作为背景图插入到目标元素中。这种方法支持自定义文本、颜色和旋转角度。

function createWatermark(text, color = 'rgba(180, 180, 180, 0.6)', fontSize = 16, angle = -30) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 设置画布尺寸
  canvas.width = 200;
  canvas.height = 200;

  // 绘制文字
  ctx.font = `${fontSize}px Arial`;
  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('image/png');
}

// 应用水印
document.body.style.backgroundImage = `url(${createWatermark('机密文件')})`;
document.body.style.backgroundRepeat = 'repeat';

使用CSS伪元素实现水印

通过CSS的::after伪元素创建纯CSS水印，适合不需要动态修改的场景。

function applyCSSWatermark(text) {
  const style = document.createElement('style');
  style.innerHTML = `
    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: 48px;
      color: rgba(0,0,0,0.1);
      transform: rotate(-30deg);
      z-index: 9999;
    }
  `;
  document.head.appendChild(style);
}

applyCSSWatermark('内部资料');

防止水印被移除

通过MutationObserver监测DOM变化，当水印元素被移除时自动重新添加。

function protectedWatermark() {
  const watermark = document.createElement('div');
  watermark.innerHTML = '严禁复制';
  Object.assign(watermark.style, {
    position: 'fixed',
    bottom: '10px',
    right: '10px',
    color: 'rgba(200,0,0,0.5)',
    zIndex: 9999,
    pointerEvents: 'none'
  });

  document.body.appendChild(watermark);

  const observer = new MutationObserver((mutations) => {
    if (!document.body.contains(watermark)) {
      document.body.appendChild(watermark);
    }
  });

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

protectedWatermark();

SVG水印实现

使用SVG创建可缩放的水印图案，保持清晰度。

function createSVGWatermark(text) {
  const svg = `
    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <text x="50%" y="50%" 
        font-family="Arial" 
        font-size="20" 
        fill="rgba(0,0,0,0.1)" 
        text-anchor="middle" 
        transform="rotate(-45 150 100)">
        ${text}
      </text>
    </svg>
  `;

  const blob = new Blob([svg], {type: 'image/svg+xml'});
  return URL.createObjectURL(blob);
}

document.body.style.backgroundImage = `url(${createSVGWatermark('水印示例')})`;
document.body.style.backgroundRepeat = 'repeat';

多行水印实现

创建包含多行文本的水印效果，适用于需要显示更多信息的情况。

function multiLineWatermark(lines, options = {}) {
  const { color = 'rgba(150,150,150,0.3)', fontSize = 14 } = options;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  canvas.width = 300;
  canvas.height = 200;

  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = color;
  ctx.textAlign = 'center';

  const lineHeight = fontSize * 1.5;
  const startY = (canvas.height - (lines.length * lineHeight)) / 2;

  lines.forEach((line, index) => {
    ctx.fillText(line, canvas.width/2, startY + (index * lineHeight));
  });

  document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;
  document.body.style.backgroundRepeat = 'repeat';
}

multiLineWatermark(['公司机密', '2023-08-15', '严禁外传']);