Base64 encode an animated gif with javascript

Question

I'm working on a meme generator that allows the user to input text on the top and bottom of their chosen meme template. In my current system, I have a few html <canvas> elements stacked on top of eachother which are updated when user interaction is detected so they may preview the final product (more specifically, one canvas for the meme template and two for the text). When they hit submit I then Base64 encode the canvases with canvas.toDataURL("image/png") in JavaScript and submit the encodings via a form to create the final combined image using RMagick.

I'm looking for a way to Base64 encode an animated gif (one that is already complete, just needs to be encoded) so that users can use these as meme templates as well.

Answer 1

You might consider this library which takes a canvas dataURL and creates an animated gif:

If you want to use several canvases you will have to create another "staging" canvas and drawImage your other canvases to the staging canvas.

https://github.com/antimatter15/jsgif