图片处理进阶攻略【2026】- GIF制作、SVG优化、水印、拼贴、裁剪与调整

┌─────────────────────────────────────┐
│           GIF Header                │
│  (签名 + 版本 + 逻辑屏幕描述符)      │
├─────────────────────────────────────┤
│        全局颜色表 (可选)             │
│     (最多 256 种颜色的调色板)        │
├─────────────────────────────────────┤
│           图像数据块                 │
│  ┌─────────────────────────────┐   │
│  │ 帧1: 图像描述符 + 像素数据   │   │
│  ├─────────────────────────────┤   │
│  │ 帧2: 图像描述符 + 像素数据   │   │
│  ├─────────────────────────────┤   │
│  │ 帧N: 图像描述符 + 像素数据   │   │
│  └─────────────────────────────┘   │
├─────────────────────────────────────┤
│           GIF Trailer               │
└─────────────────────────────────────┘

class GifMaker {
  constructor(options = {}) {
    this.width = options.width || 400;
    this.height = options.height || 300;
    this.quality = options.quality || 10;
    this.delay = options.delay || 100;
    this.repeat = options.repeat || 0;
  }

  async createGif(images) {
    const GIF = await import('gif.js');
    
    const gif = new GIF.default({
      workers: 2,
      quality: this.quality,
      width: this.width,
      height: this.height,
      workerScript: '/gif.worker.js',
      dither: 'FloydSteinberg'
    });

    for (const image of images) {
      const canvas = this.prepareFrame(image);
      gif.addFrame(canvas, { delay: this.delay });
    }

    return new Promise((resolve, reject) => {
      gif.on('finished', blob => resolve(blob));
      gif.on('error', reject);
      gif.render();
    });
  }

  prepareFrame(image) {
    const canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    const ctx = canvas.getContext('2d');
    
    const scale = Math.min(
      this.width / image.width,
      this.height / image.height
    );
    const x = (this.width - image.width * scale) / 2;
    const y = (this.height - image.height * scale) / 2;
    
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, this.width, this.height);
    ctx.drawImage(image, x, y, image.width * scale, image.height * scale);
    
    return canvas;
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<!-- 编辑器生成的注释 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "...">
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="100px" height="100px"
     viewBox="0 0 100 100">
  <metadata>
    <!-- 元数据信息 -->
  </metadata>
  <defs>
    <!-- 未使用的定义 -->
  </defs>
  <g id="layer1" transform="">
    <path d="M 10.000000 20.000000 L 30.000000 40.000000" 
          fill="#ffffff" stroke="#000000"/>
  </g>
</svg>

class SVGOptimizer {
  constructor(options = {}) {
    this.options = {
      removeComments: true,
      removeMetadata: true,
      removeEmptyAttrs: true,
      removeEmptyContainers: true,
      mergePaths: true,
      convertColors: true,
      precision: 2,
      ...options
    };
  }

  optimize(svgString) {
    let result = svgString;

    if (this.options.removeComments) {
      result = result.replace(/<!--[\s\S]*?-->/g, '');
    }

    if (this.options.removeMetadata) {
      result = result.replace(/<metadata[\s\S]*?<\/metadata>/gi, '');
      result = result.replace(/<\?xml[\s\S]*?\?>/gi, '');
      result = result.replace(/<!DOCTYPE[\s\S]*?>/gi, '');
    }

    if (this.options.removeEmptyAttrs) {
      result = result.replace(/\s+[a-z-]+=""/gi, '');
    }

    if (this.options.convertColors) {
      result = this.convertColors(result);
    }

    result = this.cleanupNumbers(result, this.options.precision);
    result = result.replace(/\s+/g, ' ').replace(/>\s+</g, '><');

    return result.trim();
  }

  convertColors(svg) {
    return svg.replace(/#([0-9a-f])\1([0-9a-f])\2([0-9a-f])\3/gi, '#$1$2$3');
  }

  cleanupNumbers(svg, precision) {
    return svg.replace(
      /(\d+\.\d{3,})/g,
      match => parseFloat(match).toFixed(precision)
    );
  }
}

class WatermarkGenerator {
  constructor(image) {
    this.image = image;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
  }

  addTextWatermark(text, options = {}) {
    const {
      fontSize = 24,
      fontFamily = 'Arial',
      color = 'rgba(255, 255, 255, 0.5)',
      position = 'bottom-right',
      padding = 20,
      rotation = 0
    } = options;

    this.canvas.width = this.image.width;
    this.canvas.height = this.image.height;
    this.ctx.drawImage(this.image, 0, 0);

    this.ctx.font = `${fontSize}px ${fontFamily}`;
    this.ctx.fillStyle = color;
    this.ctx.textBaseline = 'middle';

    const textMetrics = this.ctx.measureText(text);
    const textWidth = textMetrics.width;
    const textHeight = fontSize;

    const positions = {
      'top-left': [padding, padding + textHeight / 2],
      'top-right': [this.canvas.width - textWidth - padding, padding + textHeight / 2],
      'bottom-left': [padding, this.canvas.height - padding - textHeight / 2],
      'bottom-right': [this.canvas.width - textWidth - padding, this.canvas.height - padding - textHeight / 2],
      'center': [(this.canvas.width - textWidth) / 2, this.canvas.height / 2]
    };

    const [x, y] = positions[position] || positions['bottom-right'];

    if (rotation !== 0) {
      this.ctx.save();
      this.ctx.translate(x + textWidth / 2, y);
      this.ctx.rotate((rotation * Math.PI) / 180);
      this.ctx.fillText(text, -textWidth / 2, 0);
      this.ctx.restore();
    } else {
      this.ctx.fillText(text, x, y);
    }

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

  addTiledWatermark(text, options = {}) {
    const {
      fontSize = 18,
      color = 'rgba(128, 128, 128, 0.3)',
      spacing = 100,
      rotation = -30
    } = options;

    this.canvas.width = this.image.width;
    this.canvas.height = this.image.height;
    this.ctx.drawImage(this.image, 0, 0);

    this.ctx.font = `${fontSize}px Arial`;
    this.ctx.fillStyle = color;

    const textWidth = this.ctx.measureText(text).width;
    const stepX = textWidth + spacing;
    const stepY = fontSize + spacing;

    this.ctx.save();
    this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
    this.ctx.rotate((rotation * Math.PI) / 180);

    const diagonal = Math.sqrt(
      this.canvas.width ** 2 + this.canvas.height ** 2
    );

    for (let y = -diagonal; y < diagonal; y += stepY) {
      for (let x = -diagonal; x < diagonal; x += stepX) {
        this.ctx.fillText(text, x, y);
      }
    }

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

class ImageCollage {
  constructor(options = {}) {
    this.spacing = options.spacing || 10;
    this.backgroundColor = options.backgroundColor || '#ffffff';
  }

  createHorizontalCollage(images) {
    const maxHeight = Math.max(...images.map(img => img.height));
    const totalWidth = images.reduce((sum, img) => sum + img.width, 0) 
                       + this.spacing * (images.length - 1);

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

    ctx.fillStyle = this.backgroundColor;
    ctx.fillRect(0, 0, totalWidth, maxHeight);

    let currentX = 0;
    images.forEach(img => {
      const y = (maxHeight - img.height) / 2;
      ctx.drawImage(img, currentX, y);
      currentX += img.width + this.spacing;
    });

    return canvas;
  }

  createGridCollage(images, columns) {
    const rows = Math.ceil(images.length / columns);
    const cellWidth = Math.max(...images.map(img => img.width));
    const cellHeight = Math.max(...images.map(img => img.height));

    const totalWidth = cellWidth * columns + this.spacing * (columns - 1);
    const totalHeight = cellHeight * rows + this.spacing * (rows - 1);

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

    ctx.fillStyle = this.backgroundColor;
    ctx.fillRect(0, 0, totalWidth, totalHeight);

    images.forEach((img, index) => {
      const col = index % columns;
      const row = Math.floor(index / columns);
      const cellX = col * (cellWidth + this.spacing);
      const cellY = row * (cellHeight + this.spacing);
      const x = cellX + (cellWidth - img.width) / 2;
      const y = cellY + (cellHeight - img.height) / 2;
      ctx.drawImage(img, x, y);
    });

    return canvas;
  }
}

原图: Image[W × H]
裁剪区域: (x, y, width, height)
结果: SubImage[width × height]

class ImageCropper {
  constructor(image) {
    this.image = image;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
  }

  crop(x, y, width, height) {
    this.canvas.width = width;
    this.canvas.height = height;
    this.ctx.drawImage(
      this.image,
      x, y, width, height,
      0, 0, width, height
    );
    return this.canvas.toDataURL('image/png');
  }

  cropWithAspectRatio(aspectRatio) {
    const imgRatio = this.image.width / this.image.height;
    let cropWidth, cropHeight, x, y;

    if (imgRatio > aspectRatio) {
      cropHeight = this.image.height;
      cropWidth = cropHeight * aspectRatio;
      x = (this.image.width - cropWidth) / 2;
      y = 0;
    } else {
      cropWidth = this.image.width;
      cropHeight = cropWidth / aspectRatio;
      x = 0;
      y = (this.image.height - cropHeight) / 2;
    }

    return this.crop(x, y, cropWidth, cropHeight);
  }

  cropCircle(centerX, centerY, radius) {
    const diameter = radius * 2;
    this.canvas.width = diameter;
    this.canvas.height = diameter;

    this.ctx.beginPath();
    this.ctx.arc(radius, radius, radius, 0, Math.PI * 2);
    this.ctx.closePath();
    this.ctx.clip();

    this.ctx.drawImage(
      this.image,
      centerX - radius, centerY - radius, diameter, diameter,
      0, 0, diameter, diameter
    );

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

class ImageResizer {
  constructor(options = {}) {
    this.maintainAspectRatio = options.maintainAspectRatio ?? true;
  }

  resizeByDimensions(image, width, height) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    let newWidth = width;
    let newHeight = height;

    if (this.maintainAspectRatio) {
      const ratio = image.width / image.height;
      newHeight = Math.round(width / ratio);
    }

    canvas.width = newWidth;
    canvas.height = newHeight;
    
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(image, 0, 0, newWidth, newHeight);

    return canvas;
  }

  resizeByPercentage(image, percentage) {
    const newWidth = Math.round(image.width * percentage / 100);
    const newHeight = Math.round(image.height * percentage / 100);

    const canvas = document.createElement('canvas');
    canvas.width = newWidth;
    canvas.height = newHeight;

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(image, 0, 0, newWidth, newHeight);

    return canvas;
  }

  async batchResize(images, options) {
    const results = [];
    for (const image of images) {
      const resized = options.mode === 'percentage'
        ? this.resizeByPercentage(image, options.percentage)
        : this.resizeByDimensions(image, options.width, options.height);
      results.push(resized);
    }
    return results;
  }
}