我有一个HTML5画布,我想制作该画布的动画GIF

时间:2014-04-23 12:09:16

标签: javascript html5 canvas converter animated-gif

我有一个简单的HTML5页面,带有一个画布,在其上绘制科学可视化。

我想拍摄该画布的X帧(可能在关键点使用toDataURL()),并将其转换为我可以下载的动画GIF。

另一种方法是在没有提示的情况下将图像从DOM保存到光盘,或者将100-200张图像压缩保存,并提示可以在其他位置进行GIF。

这个问题有没有现成的解决方案?而且我并不是指录制部分DOM的AVI,保存它,提取帧并将其重新绑定为GIF。

1 个答案:

答案 0 :(得分:1)

没有保存动画GIF的本机功能,但是,这个用JavaScript编写的库可以为您完成:
https://github.com/antimatter15/jsgif

无法在不提示的情况下将图像保存到本地磁盘。您将拥有:

  • 创建一个用户可以单击以保存(并选择位置)的链接。大多数最新的浏览器都允许您使用锚标记的下载属性(< a>)。
  • 将其发送到服务器,然后使用标题中的下载属性返回以提示用户输入位置

<强>更新

如果您只想将浏览器用作本地任务的有用主机,则可以始终禁用这些限制。适用于Chrome:

要禁用所有安全措施,请使用此标志从命令行启动Chrome:

chrome.exe --disable-web-security

如果您只想使用本地文件(file://在任何情况下都是必要的):

chrome.exe --allow-file-access-from-files

我不是百分之百确定这些是否允许你保存到本地磁盘但是它们尽可能接近你自己而不修改浏览器的代码库。

希望这有帮助!