我正在使用fabricjs画布绘制自由绘图.. 我想做的是记录我的绘图并播放它..意味着我在画布上绘制..并序列化它...之后我希望它反序列化并在绘制时播放它..
这样的事情： http://ramkulkarni.com/temp/2012-10-03/ 在ramkulkarni这篇文章中有一些东西，但我无法将它实现到我的fabricjs画布上.. 我访问了fabricjs网站进行序列化，但我找不到它的播放...
如果可能的话我也想把它保存为gif .. 但是现在玩很重要... 谢谢..
答案 0 :(得分：0)
您通过使用时间戳缓冲所有绘图命令来提供记录的演示。然后你可以用JSON.stringify序列化它。要播放它将需要相同的应用程序或了解缓冲命令的播放器。笔划只是一组鼠标/笔/手势点，每个点都带有时间戳。
这种录制方法的优点是可以修改命令，不同的笔，不同的颜色，缩放，旋转，平移，甚至可以在播放时进入第三维。播放速度可以变化。它重量轻，产生的数据很少。它可以随时保存，您也可以将记录用作绘图元素，可以递归嵌套。非常方便创建复杂的设计。一个缺点是，如果你没有命令撤销来反转播放，则可能很难。
另一种方法（正如您所暗示的那样）是随时对图形进行编码。 GIF不如通用录音机好。它是内存饥饿，它有一个非常有限的托盘，所以你被迫抖动，或每帧只使用256色。颜色量化很慢（如果你使用它），结果最好是中等。哦，alpha通道是一位。 GIF不适合录制。
我所做的是在绘制时编码到WEBM。 GItHub上有一些Javascript WEBM编码器。它们将画布2D上下文或原始图像数据作为输入。编码速度足够快，不会干扰您的绘图（将编码器放在Web工作者身上以获得最佳效果）它可以处理大型画布尺寸和较长的绘图时间。最重要的是它非常便携。一切都可以播放网络视频，我个人喜欢它作为视频格式。
一个减少的webM编码器不到250行Javascript。编码器的核心是使用＆＃34; webp＆＃34;图片格式。 toDataURL支持这一点，因此辛苦工作主要在本地调用.toDataURl("image/webp",quality);中，然后将其包含在时序数据和适当的头和数据说明符中。在您调用编码之前，强制编码器进行编码而不是保存帧数据是值得的。它应该很容易与您的Fabric.js应用程序集成（只需在每次想要捕获帧时发送imgData）最后编码并保存（下载/上传）。
webM的缺点是，如果您的浏览器吐出它（阻止Chrome），则会丢失整个编码（保存部分编码是不切实际的）。并且逐个像素地记录是慢的，所以最好在笔记录时记录帧。 （我使用像素里程表和无动作检测算法来抓取帧），因为ctxs.getImageData在大型画布上很慢，并且当你进行快速绘图笔划时这样做并不好。
如果您希望发布录音，WebM编码是最佳的。如果自定义命令记录仅用于内部/私人用途，则最好。