5

I am using Gifshot to generate an animation. I am successfully generating a "file". However, it seems like the encoding is off. The image that's gets generated is being generated via the following code:

var images = [
  'http://i.imgur.com/2OO33vX.jpg',
  'http://i.imgur.com/qOwVaSN.png',
  'http://i.imgur.com/Vo5mFZJ.gif'
];

var gifshot = require('gifshot');
gifshot.createGIF(
  { 'images':images, 'numFrames': images.length }, 
  function(obj) {
    if (!obj.error) {
      fs.writeFile(
        './animation.gif', obj.image, 'base64', 
        function(err) {
          if (err) {
            alert(err);
          } else {
            alert('Should be all good');
          }
        }
      );                            
    }
  }
);

When the above code runs, animation.gif gets generated to my local file system (it generates a 108kb file). However, when I open it, the animation doesn't actually exist. I'm not sure what I'm doing wrong. I know that Gifshot returns a Base 64 image. I assumed that was the issue. So, I tried integrating the SO answer found here. However, that didn't work either. I'm not sure what I'm doing wrong. Any help is much appreciated.

Thanks!

Community
  • 1
  • 1
JQuery Mobile
  • 6,221
  • 24
  • 81
  • 134
  • When you say 'the animation doesn't actually exist', do you mean it doesn't animate (ie. stays on first frame) or that you can't open the image at all? – beingalex Nov 18 '15 at 17:25
  • Your code looks like a mix of node.js and browser code (there is no `alert` in node and no `fs.writeFile` or `require` in the browser). I don’t think gifshot works in node at the moment. It’s a browser-only library. It *could* use `node-canvas` but as far as I can tell, it [does not work with it](https://github.com/yahoo/gifshot/blob/c1a36b26fa7bbf0200f906d156297874a284e9e8/src/modules/core/utils.js#L98). If I log `obj.errorMsg`, I get “Canvas elements are not supported in your browser”. – Raphael Schweikert Nov 18 '15 at 17:46

1 Answers1

3

Try the module base64image-to-file

var images = [
  'http://i.imgur.com/2OO33vX.jpg',
  'http://i.imgur.com/qOwVaSN.png',
  'http://i.imgur.com/Vo5mFZJ.gif'
];

var gifshot = require('gifshot');
var base64ImageToFile = require('base64image-to-file'); //// new
gifshot.createGIF(
  { 'images':images, 'numFrames': images.length }, 
  function(obj) {
    if (!obj.error) {
      base64ImageToFile(obj.image, '.', 'animation.gif', //// new
        function(err) {
          if (err) {
            alert(err);
          } else {
            alert('Should be all good');
          }
        }
      );                            
    }
  }
);
fregante
  • 29,050
  • 14
  • 119
  • 159
  • Thank you so much. There are so many packages and code samples sometimes its hard to know which is correct. Your example was EXACTLY what I needed. Thank you for pointing me in the direction of `base64image-to-file`. – JQuery Mobile Nov 18 '15 at 18:11
  • You're welcome. I found searching on http://node-modules.com/ to be awesome at finding solutions like this. In this case the query was "base64 file" – fregante Nov 19 '15 at 11:17
  • This solution is no longer working for me. Has something changed? I am using https://www.npmjs.com/package/gifshot and https://www.npmjs.com/package/base64image-to-file on Node obviously. – Shreerang Nov 03 '20 at 00:31