Support array of Base64 images, and array of text for each image

[jasonrojas]

Any chance we can get support for:

gifshot.createGIF({
    'images': ["data:image/jpeg;base64,/9...", "data:image/jpeg;base64,/9"],
    'text': ["Text1", "Text2"]
}, function (obj) {
    if(!obj.error) {
        var image = obj.image,
        animatedImage = document.createElement('img');
        animatedImage.src = image;
        document.body.appendChild(animatedImage);
    }
});

etc?

[gfranko]

We can definitely support base 64 existing images, but I don't like the idea of passing an array of text to add to each (the text should already be within the existing GIF)

[adamb0mb]

What if the text option supported a function, not just a static string? I would also like to layer on some frame-specific text.

[gfranko]

@adamb0mb I like the idea of providing function support for any options that could be applied per frame (e.g. interval, text, fontWeight, etc), so that a user could write their own logic. How would this look?

'text': function(currentFrame, defaultText) {
  return defaultText;
}

[adamb0mb]

Short answer: yes, that's roughly what I was thinking.

Longer answer, to make sure we're on the same page: My usage pattern is going to be something like this:

var snapshots = [
  {image: '/images/1.png', timestamp: '2014-10-15', message: 'gifshot is the best'},
  {image: '/images/2.png', timestamp: '2014-10-16', message: 'gifshot is still the best'},
  {image: '/images/3.png', timestamp: '2014-10-17', message: 'gifshot is stiller the best'}
];
gifshot.createGif({
  images: _.pluck(snapshots, 'image'),
  text: function (image, default) {
    // I'm using 'image' to key into my array of images. I don't know how this would work with videos though
    return _.where(snapshots, { image: image }).message || default;
  }
}, function (data) {
  // put that gif on the page!
})

[gfranko]

Ahh okay. I'll make sure to just return an object in each option's callback function that would look like this:

'text': function(obj) {
  return obj.default;
}

{
  currentFrame: 1,
  image: '/images/1.png',
  video: null,
  default: ''
}

[adamb0mb]

Yeah, that seems spot on.

Adam

On Wed, Oct 15, 2014 at 4:17 PM, Greg Franko [email protected] wrote:

Ahh okay. I'll make sure to just return an object in each option's callback function that would look like this:

{ currentFrame: 1, image: '/images/1.png', video: null, default: ''}

— Reply to this email directly or view it on GitHub https://github.com/yahoo/gifshot/issues/2#issuecomment-59292024.

[fabiolab]

Hello,

The lonely thing avoiding the dataurl format support seems to be the systematic presence of the "crossorigin" attribute. Dealing with it allows to get base 64 images works. A straightforward and naive solution is to check wether the string begins with "data:image" before adding the attribute to the img tag.

There may be a nicer approach ...

(Great lib, thanks for it !)

[gfranko]

Will look into fixing this in the next release

[adamb0mb]

Is there a "resurrected from the dead" emoji? That could be useful here :-). Glad to see movement from y'all again!

[gfranko]

@adamb0mb Just took a little bit of a break from open source haha

[biplabmalakar]

I am not using camera stream or any media from browser. I am only passing array of image, but still its giving error regarding 'getUserMedia permission'. How can i fixed this problem.

[themre]

hi, has anyone started doing PR for this? perhaps I could take a look. most important is the ability to pass image blob and text to individual frame.