js 实现图片水印

使用Canvas实现图片水印

通过Canvas绘制水印并叠加到原图上，适用于前端动态生成水印。以下是一个基础实现示例：

function addWatermarkToImage(imageUrl, watermarkText, outputFormat = 'image/png') {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.src = imageUrl;

  return new Promise((resolve) => {
    img.onload = () => {
      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 = '20px Arial';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // 平铺水印
      for (let x = 0; x < canvas.width; x += 150) {
        for (let y = 0; y < canvas.height; y += 100) {
          ctx.fillText(watermarkText, x, y);
        }
      }

      resolve(canvas.toDataURL(outputFormat));
    };
  });
}

// 使用示例
addWatermarkToImage('original.jpg', 'Confidential')
  .then(watermarkedImage => {
    document.getElementById('outputImage').src = watermarkedImage;
  });

使用CSS实现视觉水印

通过CSS伪元素或背景图实现非破坏性水印，适合需要保留原图的场景：

<style>
  .watermarked-container {
    position: relative;
    display: inline-block;
  }

  .watermarked-container::after {
    content: "Watermark Text";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transform: rotate(-45deg);
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 100px,
      rgba(0,0,0,0.1) 100px,
      rgba(0,0,0,0.1) 200px
    );
  }
</style>

<div class="watermarked-container">
  <img src="original.jpg" alt="Original Image">
</div>

使用SVG作为水印背景

创建可缩放的矢量水印，适合需要高清晰度的场景：

function createSVGWatermark(text, options = {}) {
  const { 
    fontSize = 20, 
    opacity = 0.5, 
    color = '#FFFFFF', 
    angle = -45 
  } = options;

  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
      <text 
        x="50%" 
        y="50%" 
        font-size="${fontSize}" 
        fill="${color}" 
        opacity="${opacity}"
        text-anchor="middle" 
        dominant-baseline="middle"
        transform="rotate(${angle} 100 100)">
        ${text}
      </text>
    </svg>
  `;
  return `url('data:image/svg+xml;utf8,${encodeURIComponent(svg)}')`;
}

// 应用示例
const watermarkStyle = {
  backgroundImage: createSVGWatermark('Sample', { fontSize: 30 }),
  backgroundRepeat: 'repeat'
};
document.getElementById('targetElement').style.backgroundImage = watermarkStyle.backgroundImage;

防篡改水印实现

通过修改像素数据实现难以去除的水印：

function applySecureWatermark(imageData, intensity = 5) {
  const data = imageData.data;
  // 在每个像素的LSB(最低有效位)嵌入水印信息
  for (let i = 0; i < data.length; i += 4) {
    if (i % 16 === 0) { // 降低密度避免过于明显
      data[i] = data[i] ^ intensity;   // R
      data[i+1] = data[i+1] ^ intensity; // G
      data[i+2] = data[i+2] ^ intensity; // B
    }
  }
  return imageData;
}

// 配合Canvas使用
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(imgElement, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const watermarkedData = applySecureWatermark(imageData);
ctx.putImageData(watermarkedData, 0, 0);

动态水印生成库推荐

对于生产环境，可以考虑以下成熟库：

• watermark.js：轻量级库，支持文本/图片水印
• fabric.js：功能强大的Canvas库，包含水印功能
• react-watermark：专为React设计的水印组件

安装watermark.js的示例：

npm install watermarkjs

使用示例：

import watermark from 'watermarkjs';

watermark(['original.jpg'])
  .image(watermark.text.lowerRight('Watermark', '24px Arial', '#fff', 0.5))
  .then(img => document.body.appendChild(img));