Generate Animated GIF with GM in Node.js

Nikolay picture Nikolay · May 19, 2014 · Viewed 9.7k times · Source

so i've been tackling this one for a few days and got the point when i'm ready to ask for help.

I'm trying to generate an animated gif with in a node.js based app, using the graphicsmagic package.

I've generated several slides that look kinda like that

var slides = [];

for (var i=0; i < 10; i++) {
  var slide = gm(200, 200, '#000000')
    .fill('#ffffff')
    .drawText("Slide #"+ i);

  slides.push(slide);
}

I can convert them either into streams or buffers, i can save them as individual files on the hard drive and kinda works

But my problem is how to make an animated gif from those slides completely in memory, without saving the individual files on a hard drive?

I see gm has methods like #delay() and #page() and so technically i could craft a command like

convert -delay 200 -page slide1.gif -page slide2.gif output.gif

I just don't know how. I'm thinking it should looks something like that

var end_image = gm(200, 200, '#000000');

end_image.delay(500);

for (var i=0; i < slides.length; i++) {
  slides[i].toBuffer(function(err, buffer) {
    end_image.page(200, 200, ????);
  });
}

end_image.write("output.gif");

basically I don't know how to convert a buffer into an argument for gm

Have anyone done it before? Maybe there is another way?

PS: i tried to use the gifencoder package as well, and successfully fed the gm buffers as frames into a gifencoder's API, but the output was all broken.

Answer

mscdex picture mscdex · May 19, 2014

There is the gif module lets you create static and animated gifs which may help you.