当前位置：首页 > JavaScript

js实现水印

2026-01-31 14:50:30JavaScript

使用Canvas绘制水印

在HTML中创建一个Canvas元素，通过JavaScript绘制文字或图片水印。Canvas提供了灵活的绘图API，可以自定义水印的样式和位置。

function addWatermark(text, options = {}) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = options.width || 200;
  canvas.height = options.height || 100;

  ctx.font = options.font || '16px Arial';
  ctx.fillStyle = options.color || 'rgba(0, 0, 0, 0.1)';
  ctx.textAlign = options.align || 'center';
  ctx.textBaseline = options.baseline || 'middle';

  ctx.fillText(text, canvas.width / 2, canvas.height / 2);

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

应用水印到页面

将生成的水印作为背景图片应用到目标元素上，通过CSS的background-image属性实现平铺效果。

function applyWatermark(element, watermarkUrl) {
  element.style.backgroundImage = `url(${watermarkUrl})`;
  element.style.backgroundRepeat = 'repeat';
}

动态水印保护

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

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

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

SVG水印实现

使用SVG创建矢量水印，具有更好的清晰度和缩放性能。SVG水印可以通过Base64编码嵌入到CSS中。

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

图片水印处理

对于需要添加水印的图片，可以使用Canvas将水印绘制到原始图片上，然后导出新的图片数据。

async function addWatermarkToImage(imageUrl, watermarkText) {
  const img = new Image();
  img.crossOrigin = 'Anonymous';
  img.src = imageUrl;

  await new Promise((resolve) => img.onload = resolve);

  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');

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

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

水印样式自定义

提供多种样式选项，允许用户自定义水印的角度、透明度、间距等属性。

function createCustomWatermark(text, {
  fontSize = 20,
  color = 'rgba(0,0,0,0.1)',
  angle = -30,
  spacing = 100
} = {}) {
  const canvas = document.createElement('canvas');
  const size = spacing * 2;
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext('2d');

  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.translate(size / 2, size / 2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.fillText(text, 0, 0);

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

全屏水印实现

创建一个覆盖整个页面的水印层，使用绝对定位和z-index确保水印显示在内容上方。

function createFullscreenWatermark(text) {
  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.zIndex = '9999';
  watermark.style.backgroundImage = `url(${createCustomWatermark(text)})`;

  document.body.appendChild(watermark);
  return watermark;
}

js实现水印