2

Here are the steps in which I want to do this:

  1. The user gives the server a link to an animated gif
  2. The server uses "request(url)" to retrieve the file
  3. The server generates a thumbnail of the gif's first frame
  4. The server uploads the thumbnail to Amazon S3

The problem exists in Step 3. I can't figure out a way to extract the gif's first frame. I would prefer to use GraphicsMagick but if there is another way you know of that works, I would be most grateful!

NodeJS is being used.

aleclarson
  • 18,087
  • 14
  • 64
  • 91
  • There's a GraphicsMagick package for Node.js: http://aheckmann.github.io/gm/ – GJK Jun 19 '13 at 17:23
  • @GJK Yeah that's what I'm using. Unfortunately when I try to add the [0] to end of the url, it is not grabbing the first frame. It is instead just saving the gif in a crappy quality. – aleclarson Jun 20 '13 at 01:06
  • what graphicsmagick command do you need to use and what command is `gm` generating for you? – Jonathan Ong Jun 20 '13 at 05:49

2 Answers2

6

I don't know why this isn't in the documentation, but someone else answered this here on stackoverflow.

So, you can use this either with a file path string or a stream/buffer, like so:

For a file:

gm('/path/to/animated.gif')
.selectFrame(0)
.write('/path/to/firstframe.png', function(err){
    if (err) print('  :(  ');
})

For a stream/buffer:

gm(streamOrBuffer)
.selectFrame(0)
.write('/path/to/firstframe.png', function(err){
    if (err) print('  :(  ');
})

In the documentation they say you need to change the path string to be something like '/path/to/animated.gif[0]' to be more specific with the frame you want to select, but I tested that code without specifying the frame, and it worked fine (using gm@1.21.1 and ImageMagick 6.7.7-10 2014-03-06). Also, what they had in the documentation (without using selectFrame) didn't work. It ended up crashing and creating several png frames of the whole gif in the process.

Why they haven't documented selectFrame yet is beyond me. As they pointed out in the cited link, there's an open issue wondering precisely that.

Community
  • 1
  • 1
Lucio Mollinedo
  • 2,295
  • 1
  • 33
  • 28
0

Since I couldn't get it working on the server-side, I ended up just drawing the .gif to a <canvas> element to "simulate" extracting a .gif's first frame. This gave me the paused gif that I was going for.

aleclarson
  • 18,087
  • 14
  • 64
  • 91