如何使用Sharp Node.js包合成静态背景图与GIF动图

方法一：使用GraphicsMagick（gm Node.js包） #

GraphicsMagick对GIF帧的处理支持更友好，可以逐帧将GIF叠加到静态背景上，再重新合成动图。

1. 安装依赖

npm install gm

（注意：需先在系统中安装GraphicsMagick工具，Windows/macOS/Linux可通过对应包管理器安装）

2. 实现代码

const gm = require('gm').subClass({ imageMagick: false });
const fs = require('fs');

// 配置路径
const bgPath = './background.png';
const gifPath = './source.gif';
const outputPath = './output.gif';

// 读取GIF的帧信息
gm(gifPath)
  .identify((err, info) => {
    if (err) throw err;
    const frameCount = info.GIF.NumberOfFrames;
    const delay = info.GIF.Delay[0]; // 单帧延迟时间（毫秒）

    // 创建帧处理队列
    let frameOps = gm(bgPath);
    for (let i = 0; i < frameCount; i++) {
      // 逐帧叠加GIF到背景图
      frameOps = frameOps
        .in('-page', '+0+0')
        .in(`${gifPath}[${i}]`)
        .flatten();
    }

    // 设置延迟并输出GIF
    frameOps
      .delay(delay)
      .loop(0) // 无限循环
      .write(outputPath, (err) => {
        if (err) throw err;
        console.log('合成完成');
      });
  });

方法二：使用FFmpeg（fluent-ffmpeg包） #

FFmpeg通过滤镜可以直接实现背景与GIF的叠加，无需手动处理帧，效率更高。

1. 安装依赖

npm install fluent-ffmpeg

（系统需先安装FFmpeg工具，可通过官网或包管理器安装）

2. 实现代码

const ffmpeg = require('fluent-ffmpeg');

// 配置路径
const bgPath = './background.jpg';
const gifPath = './source.gif';
const outputPath = './output.gif';

ffmpeg()
  // 输入背景图和GIF
  .input(bgPath)
  .input(gifPath)
  // 设置背景图循环次数（匹配GIF时长）
  .inputOptions('-loop', 1)
  // 使用overlay滤镜叠加，位置居中（可替换为+0+0等自定义位置）
  .complexFilter([
    '[0:v][1:v]overlay=(W-w)/2:(H-h)/2:shortest=1'
  ])
  // 设置输出格式、帧率、循环
  .outputOptions([
    '-pix_fmt', 'rgb24',
    '-loop', 0,
    '-delay', '10' // 单帧延迟，根据原GIF调整
  ])
  .save(outputPath)
  .on('end', () => console.log('合成完成'))
  .on('error', (err) => console.error('合成失败:', err));

注意事项 #

• 确保系统已安装对应的底层工具（GraphicsMagick/FFmpeg），否则Node.js包无法正常工作。
• 若原GIF有透明通道，叠加时会自动保留透明效果，无需额外处理。
• 可根据需求调整叠加位置（如+10+20表示距左上角10px、20px）、延迟时间、循环次数等参数。

内容的提问来源于stack exchange，提问作者Sharp Dev