Canvas 在fabricjs画布中自由绘制。通过序列化和反序列化
我正在使用fabricjs canvas绘制自由绘图。。 我想做的就是把我的画录下来并播放。。意思是我在画布上画画。。并将其序列化。。在那之后，我希望它反序列化，并按它绘制的方式播放 大概是这样的： 在ramkulkarni的这篇文章中，有一个东西，但我无法将它实现到我的fabricjs画布上。。 我访问了fabricjs网站进行连载，但我找不到可以播放的 如果可能的话，我还想把它保存为gif。。 但是现在比赛很重要。。。Canvas 在fabricjs画布中自由绘制。通过序列化和反序列化,canvas,html5-canvas,fabricjs,Canvas,Html5 Canvas,Fabricjs,我正在使用fabricjs canvas绘制自由绘图。。 我想做的就是把我的画录下来并播放。。意思是我在画布上画画。。并将其序列化。。在那之后，我希望它反序列化，并按它绘制的方式播放 大概是这样的： 在ramkulkarni的这篇文章中，有一个东西，但我无法将它实现到我的fabricjs画布上。。 我访问了fabricjs网站进行连载，但我找不到可以播放的 如果可能的话，我还想把它保存为gif。。 但是现在比赛很重要。。。 谢谢您。您通过使用时间戳缓冲所有绘图命令来提供记录的演示。然后，您可以使
谢谢您。您通过使用时间戳缓冲所有绘图命令来提供记录的演示。然后，您可以使用JSON.stringify将其序列化。播放它需要相同的应用程序或理解缓冲命令的播放器。笔划只是一组鼠标/笔/手势点，每个点都有一个时间戳 这种录制方法的优点是，当您回放时，可以修改命令，使用不同的笔、不同的颜色、缩放、旋转、平移，甚至可以将其转换为三维。播放速度可以改变。它重量轻，生成的数据小。可以边走边保存，也可以将记录用作可以递归嵌套的绘图元素。非常方便创建复杂的设计。一个缺点是，如果您没有一个命令一个命令地撤消以反转播放，则可能会很困难 另一种方法是（如您所暗示的）在运行时对图形进行编码。GIF不能用作通用记录器。这是内存饥饿，它有一个非常有限的托盘，所以你不得不抖动，或只使用256色每帧。颜色量化是缓慢的（如果你使用它），结果是中等最好的。哦，阿尔法通道是一位。GIF不是用来录音的 我所做的是在画图时对WEBM进行编码。GItHub上有一些Javascript WEBM编码器。它们将画布2D上下文或原始图像数据作为输入。编码足够快，不会干扰您的绘图（将编码器放在web worker上以获得最佳结果），它可以处理较大的画布尺寸和较长的绘图时间。最重要的是它非常便携。任何东西都可以播放webm视频，我个人喜欢它作为视频格式 一个精简的webM编码器不到250行Javascript。编码器的核心使用“webp”图像格式
toDataURL.toDataURL（“image/webp”，quality）中进行艰苦的工作然后只需将其包装在计时数据和适当的头和数据说明符中。在调用encode之前，强制编码器进行编码而不是保存帧数据是值得的。它应该很容易与Fabric.js应用程序集成（只要在每次需要捕获帧时将imgData发送给它），最后进行编码和保存（下载/上传）
webM的缺点是，如果您的浏览器吐出了它（dam you Chrome），您将丢失整个编码（保存部分编码是不切实际的）。一个像素一个像素地记录会变慢，所以最好在画笔时记录帧。（我使用像素里程表和无动作检测算法来抓取帧），因为ctxs.getImageData在大型画布上速度较慢，在快速绘制笔划时这样做是没有好处的
如果您希望发布录制内容，WebM编码是最好的。自定义命令记录最好仅用于内部/私人使用。您通过使用时间戳缓冲所有绘图命令来提供记录的演示。然后，您可以使用JSON.stringify将其序列化。播放它需要相同的应用程序或理解缓冲命令的播放器。笔划只是一组鼠标/笔/手势点，每个点都有一个时间戳
这种录制方法的优点是，当您回放时，可以修改命令，使用不同的笔、不同的颜色、缩放、旋转、平移，甚至可以将其转换为三维。播放速度可以改变。它重量轻，生成的数据小。可以边走边保存，也可以将记录用作可以递归嵌套的绘图元素。非常方便创建复杂的设计。一个缺点是，如果您没有一个命令一个命令地撤消以反转播放，则可能会很困难
另一种方法是（如您所暗示的）在运行时对图形进行编码。GIF不能用作通用记录器。这是内存饥饿，它有一个非常有限的托盘，所以你不得不抖动，或只使用256色每帧。颜色量化是缓慢的（如果你使用它），结果是中等最好的。哦，阿尔法通道是一位。GIF不是用来录音的
我所做的是在画图时对WEBM进行编码。GItHub上有一些Javascript WEBM编码器。它们将画布2D上下文或原始图像数据作为输入。编码足够快，不会干扰您的绘图（将编码器放在web worker上以获得最佳结果），它可以处理较大的画布尺寸和较长的绘图时间。最重要的是它非常便携。任何东西都可以播放webm视频，我个人喜欢它作为视频格式
一个精简的webM编码器不到250行Javascript。编码器的核心使用“webp”图像格式toDataURL
支持这一点，因此主要在本机调用.toDataURL（“image/webp”，quality）中进行艰苦的工作然后只需将其包装在计时数据和适当的头和数据说明符中。在调用encode之前，强制编码器进行编码而不是保存帧数据是值得的。它应该很容易与Fabric.js应用程序集成（只要在每次需要捕获帧时将imgData发送给它），最后进行编码和保存（下载/上传）
webM的缺点是，如果您的浏览器吐出了它（dam you Chrome），您将丢失整个编码（保存部分编码是不切实际的）。一个像素一个像素地记录会变慢，所以最好在画笔时记录帧。（我使用