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