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 pletely 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 mand 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.

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 pletely 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 mand 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.

• javascript
• node.js
• image-processing
• imagemagick
• graphicsmagick

• Were you able to figure this out? I have tried both gifencoder (got as far as it sounds like you did, but get a segmentation fault on trying to use addFrame() with buffers) and the gif module (which seems to only work with older versions of node). – Gregir Commented Dec 19, 2014 at 20:20
• @Gregir nope, did it through dumping a bunch of files in /tmp and shelling out – Nikolay Commented Dec 20, 2014 at 21:36
• I have the code to do this with the JIMP library but i am trying to figure out how to do this with GM myself – PirateApp Commented Mar 18, 2017 at 7:16

3 Answers 3

This may not be exactly the answer you were looking for, but I think the following does answer the question title: "how to generate an animated gif with GM in Node.js"

var Gm = require("gm");

Gm()
.in("image1.jpg")
.in("image2.jpg")
.delay(100)
.resize(600,600)
.write("animated.gif", function(err){
  if (err) throw err;
  console.log("animated.gif created");
});

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

For anyone looking for a JavaScript encoder (as opposed to a C++ Node module), gifencoder seems to be able to do the job. An example from their page:

const GIFEncoder = require('gifencoder');
const encoder = new GIFEncoder(854, 480);
const pngFileStream = require('png-file-stream');
const fs = require('fs');

const stream = pngFileStream('test/**/frame?.png')
  .pipe(encoder.createWriteStream({ repeat: -1, delay: 500, quality: 10 }))
  .pipe(fs.createWriteStream('myanimated.gif'));

stream.on('finish', function () {
  // Process generated GIF
});

// Alternately, you can wrap the "finish" event in a Promise
await new Promise((resolve, reject) => {
  stream.on('finish', resolve);
  stream.on('error', reject);
});