如何使用Node的GraphicsMagick/ImageMagick提取GIF动图的帧

PHP端的参考代码是通过coalesceImages处理GIF帧的透明叠加问题后获取所有帧，gm库中对应实现逻辑如下：

前置依赖 #

首先确保本地环境已安装GraphicsMagick或ImageMagick，然后安装gm依赖包：
npm install gm

常用实现方案 #

• 方案1：直接导出所有帧到本地文件

const gm = require('gm');
// 若使用ImageMagick，替换为下面的初始化方式
// const gm = require('gm').subClass({imageMagick: true});

gm('image.gif')
  .coalesce() // 等效PHP中coalesceImages，修复透明帧显示异常问题
  .write('./frame-%d.png', (err) => {
    if (err) throw err;
    console.log('帧提取完成，文件命名依次为frame-0.png、frame-1.png...');
  });

• 方案2：逐帧读取到内存做后续处理（不写入本地）

const gm = require('gm');
// 若使用ImageMagick替换初始化方式同上

// 先获取GIF总帧数
gm('image.gif').identify('%n', (err, frameCount) => {
  if (err) throw err;
  frameCount = parseInt(frameCount);
  const frameBuffers = [];

  for (let i = 0; i < frameCount; i++) {
    gm('image.gif')
      .selectFrame(i)
      .coalesce()
      .toBuffer('PNG', (err, buffer) => {
        if (err) throw err;
        frameBuffers.push(buffer);
        if (frameBuffers.length === frameCount) {
          // 所有帧提取完成，可在此处写后续处理逻辑
          console.log(`共提取到${frameCount}帧，已全部加载到内存`);
        }
      });
  }
});

注意事项：

1. 必须调用coalesce方法，否则带透明通道的GIF提取的帧会出现画面叠加、透明区域显示错误的问题
2. 导出格式可自定义，修改write的文件名后缀或toBuffer的第一个参数即可切换为JPG、WebP等格式
3. 若提取大体积GIF建议使用流式处理避免内存占用过高

内容的提问来源于stack exchange，提问作者Sergey Pererva