2

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.

Cam
  • 1,706
  • 2
  • 13
  • 15
  • Believe this has been answered before here: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript – Steve Jan 23 '14 at 03:16
  • @Steven: Out of the box, html canvases do not support animated gifs. That answer would leave me with the Base64 encoding of only 1 frame of the gif which is the current behavior. – Cam Jan 23 '14 at 03:33

1 Answers1

0

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

markE
  • 102,905
  • 11
  • 164
  • 176