Display all frames of a GIF as a single image

Question

I'm using gif-frames (https://www.npmjs.com/package/gif-frames) to extract frames from animated GIFS. I'd like to save all the frames as a single image.

I know I can use something like https://www.npmjs.com/package/merge-img but I don't know how to use frameData output of gif-frames and use it as input for mergeImg. Can you please help?

You can do it simply in the Terminal with **ImageMagick** using `magick INPUT.GIF -coalesce +append result.png`. If using older v6, replace `magick` with `convert`. — Mark Setchell, Jun 28 '20 at 12:44

score 0 · Answer 1 · answered Jun 28 '20 at 09:12

The easiest way I found to do that is the following, but I'm sure there are better ways.

gifFrames(

  { url: 'img.gif', frames: '0-2', outputType: 'jpg', cumulative: true },
  function (err, frameData) {
    if (err) {
      throw err;
    }

    frameData.forEach(function (frame) {
      frame.getImage().pipe(fs.createWriteStream(
        'image-' + frame.frameIndex + '.png'
      ));
      all_imgs.push('image-' + frame.frameIndex + '.png');
    });
    mergeImg(all_imgs).then((img) => {
      // Save image as file
      img.write('out.png', () => console.log('done'));
    });
  }
);

Display all frames of a GIF as a single image

1 Answers1