简体繁体 English

Base64使用javascript编码动画gif

[英]Base64 encode an animated gif with javascript

原文 2014-01-23 02:57:21 9 1 javascript/ canvas/ base64/ animated-gif

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). 在我当前的系统中，我在彼此的顶部堆叠了一些html <canvas>元素，这些元素在检测到用户交互时会进行更新，以便它们可以预览最终产品（更具体地说，一个用于meme模板的画布和两个用于文本的画布）。 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. 当他们点击canvas.toDataURL("image/png") Base64在JavaScript中使用canvas.toDataURL("image/png")对画布进行编码，并通过表单提交编码以使用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. 我正在寻找一种对Base64编码动画gif（一种已经完成，只需要对其进行编码）的方法，以便用户也可以将它们用作meme模板。

1 个解决方案

You might consider this library which takes a canvas dataURL and creates an animated gif: 您可能会考虑使用一个带canvas dataURL并创建动画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. 如果要使用多个画布，则必须创建另一个“暂存”画布，并将其他画布drawImage到暂存画布。

https://github.com/antimatter15/jsgif https://github.com/antimatter15/jsgif