当前位置：首页 > JavaScript

js水印实现

2026-02-02 06:07:54JavaScript

基础水印实现

使用Canvas绘制水印并覆盖在页面上是最常见的方法。以下代码创建了一个半透明文字水印：

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

  ctx.font = '16px Arial';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.rotate(-0.3);
  ctx.fillText(text, 30, 100);

  return canvas.toDataURL();
}

const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
watermarkDiv.style.top = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.backgroundImage = `url(${createWatermark('机密文件')})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
document.body.appendChild(watermarkDiv);

防删除水印方案

为防止用户通过开发者工具删除水印元素，可采用MutationObserver监控DOM变化：

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

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

// 防止控制台修改样式
Object.defineProperty(watermarkDiv.style, 'display', {
  get() { return 'block'; },
  set() {}
});

SVG矢量水印实现

对于需要高清显示的场景，使用SVG水印效果更佳：

js水印实现

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

// 使用方式与Canvas类似

动态水印方案

为增加破解难度，可以实现动态变化的水印：

function generateRandomString() {
  return Math.random().toString(36).substring(2, 10);
}

setInterval(() => {
  watermarkDiv.style.backgroundImage = `url(${createWatermark(generateRandomString())})`;
}, 5000);

图片水印处理

为现有图片添加水印可使用以下方法：

js水印实现

function watermarkImage(originalImage, watermarkText) {
  const canvas = document.createElement('canvas');
  canvas.width = originalImage.width;
  canvas.height = originalImage.height;
  const ctx = canvas.getContext('2d');

  ctx.drawImage(originalImage, 0, 0);
  ctx.font = '30px Arial';
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.fillText(watermarkText, 50, 50);

  return canvas.toDataURL('image/png');
}

水印样式优化

提升水印美观度和隐蔽性的样式建议：

使用渐变透明度：rgba(0,0,0,0.05)
添加文字阴影：text-shadow: 1px 1px 3px rgba(0,0,0,0.2)
多行文字排列
倾斜角度控制在15-30度之间

服务端水印方案

对于重要文档，建议在服务端生成水印。Node.js示例：

const sharp = require('sharp');
const fs = require('fs');

async function addWatermark(inputPath, outputPath) {
  await sharp(inputPath)
    .composite([{
      input: Buffer.from(`
        <svg width="500" height="100">
          <text x="50" y="50" font-family="Arial" font-size="20" fill="rgba(0,0,0,0.3)">机密文档</text>
        </svg>
      `),
      gravity: 'southeast'
    }])
    .toFile(outputPath);
}