OpenFL Bitmap sequence --> HTML5 Rendered Animated GIF

Help
1

Hi, I’m making a web app where the user should be able to tweak bitmaps and create image sequences, and export the whole thing into an animated GIF, rendered in html5 and available to download.

I’ve looked into libs like gif.js ( https://github.com/jnordberg/gif.js )

The function gif.addFrame accepts parameters like :

// image element
gif.addFrame(imageElement);

// or a canvas element
gif.addFrame(canvasElement, {delay: 200});

// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});

Problem : How to convert an array of BitmapData in openFL to anything that this function accepts?

I see that i can use js.html in openFL to create such elements, like ImageElement. Is there a way to convert my BitmapDatas to this?

Or should I use another way? ( a Blob element? But it probably won’t work with this function )

Thanks in advance

2

After including both gif.js and gif.worker.js you can use them like this:

var img1:BitmapData = Assets.getBitmapData("assets/img1.png");
var img2:BitmapData = Assets.getBitmapData("assets/img2.png");		
var gif = untyped __js__("new GIF({ workers: 2,quality: 10})");
gif.addFrame(img1.image.src, { delay: 200 } );
gif.addFrame(img2.image.src, {delay: 300});
gif.on('finished', function(blob) 
{
     untyped window.open(URL.createObjectURL(blob));
});
gif.render();
1 Like
3

Thanks, it’s working!

I had to replace :
untyped window.open(URL.createObjectURL(blob));
with :
untyped window.saveAs(blob, “mixit.gif”, true);

though, the first one would fail silently on Safari ( some security restrictions i suppose? )

4

Perhaps new window has to be opened on user interaction (click event) for it to work on safari.