How can I extract the first frame of a GIF and save it as a PNG using GraphicsMagick on NodeJS?

浪子不回头ぞ 提交于 2019-12-10 11:32:56

问题


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.


回答1:


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.




回答2:


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.



来源:https://stackoverflow.com/questions/17196488/how-can-i-extract-the-first-frame-of-a-gif-and-save-it-as-a-png-using-graphicsma

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!