当前位置：首页 > JavaScript

js 实现水印

2026-01-31 13:21:37JavaScript

实现水印的基本方法

在JavaScript中实现水印可以通过Canvas绘制或CSS样式叠加。以下是两种常见方法：

Canvas绘制方法 创建Canvas元素并绘制文字或图片水印，将Canvas转为Base64后作为背景图。

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(0, 0, 0, 0.1)';
  ctx.rotate(-20 * Math.PI / 180);
  ctx.fillText(text, 10, 50);
  return canvas.toDataURL();
}

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

CSS伪元素方法 使用::after伪元素创建透明水印层，适合简单文字水印。

const style = document.createElement('style');
style.innerHTML = `
  body::after {
    content: "${'Watermark'}";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: rgba(0,0,0,0.1);
    z-index: 9999;
    pointer-events: none;
    transform: rotate(-15deg);
  }
`;
document.head.appendChild(style);

防删除水印实现

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

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

function restoreWatermark() {
  const watermark = document.createElement('div');
  watermark.className = 'watermark';
  // 水印样式和内容
  document.body.appendChild(watermark);
}

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

动态水印参数配置

可通过配置对象自定义水印样式：

function createConfigurableWatermark(config = {}) {
  const {
    text = 'Watermark',
    color = 'rgba(0,0,0,0.1)',
    fontSize = 16,
    angle = -20,
    density = 100
  } = config;

  // 实现逻辑...
}

全屏平铺水印方案

实现重复平铺的水印效果：

function createTiledWatermark() {
  const patternSize = 200;
  const canvas = document.createElement('canvas');
  canvas.width = patternSize;
  canvas.height = patternSize;

  const ctx = canvas.getContext('2d');
  ctx.font = '14px Arial';
  ctx.fillStyle = 'rgba(0,0,0,0.05)';
  ctx.textAlign = 'center';

  for(let i = 0; i < 3; i++) {
    for(let j = 0; j < 3; j++) {
      ctx.save();
      ctx.translate(i * patternSize/3, j * patternSize/3);
      ctx.rotate(-20 * Math.PI / 180);
      ctx.fillText('Confidential', patternSize/6, patternSize/6);
      ctx.restore();
    }
  }

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

图片水印实现

为图片添加水印的示例：

function watermarkImage(imgElement, text) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);
  ctx.font = '30px Arial';
  ctx.fillStyle = 'rgba(255,255,255,0.5)';
  ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width/2, canvas.height/2);

  imgElement.src = canvas.toDataURL();
}

js 实现水印