Javascript 序列化HTML画布

我正在尝试创建一个服务，允许2个以上的用户实时并发修改画布。我一直在探索最好的方法背后的文献，但没有发现太多有用的东西

到目前为止，我已经找到了使用

canvas.toDataUrl（）

序列化画布的方法。这里的问题是，当只有很少的像素改变时（即，当其他用户修改它时），重新绘制整个画布似乎效率很低

我真的不知道从哪里开始这个特殊的项目，并希望有一些帮助

---

不超过40个用户同时查看画布。

取决于用户绘制的内容和方式

如果他们只能绘制/操作预定义的原语集，比如软件框图，那么您可以只发送描述这些原语及其位置的JSON序列化数据列表

若绘图只是像这样的像素位图，那个么你们可以把它绘制成位图，然后在鼠标上播放序列化为PNG的位图

要将此发布给所有用户，我将基于socket.io执行一些操作。例如，Node.js有很多关于如何进行基于socket.io的聊天的示例。聊天在概念上与您想要实现的目标非常接近

---

为什么不从每个用户发送差异？如果我只改变3个像素，只需广播哪3个像素以及我对它们做了什么。这是我的直觉。这里的问题是，我不确定这是否是一个好的解决办法。我可能会忽略这样一个实现。我没有读过或听说过有人做过这样的事情。正在做什么样的修改？这个应用程序模拟了一块黑板，老师用它来远程教学学生。它还允许学生在允许的情况下在BB上书写。我明白了…一个用户将拖动以在板上创建行，因此每个用户修改都是一批moveTo和多个lineTo。您可以从用户拖动中捕获moveTo/lineTo点。然后将拖动的对象序列化为一个JSON对象，如下所示：{path:“m100100，l150100200200”}，其中M表示moveTo，L表示一系列lineTo点。然后通过WebSocket将其发送到服务器（回退到轮询）。然后服务器可以向所有用户广播该JSON对象。最后，每个客户端上的javascript在接收到的对象中绘制moveTo和LineTo。（需要时间戳）c-smile，到目前为止，我的应用程序与2非常相似。我最初考虑将画布解析为位图，但没有找到相关文献。对于这个项目的原型，我使用Firebase进行实时数据共享。真正的项目要么使用Express+Socket.io，要么在Play2.0和Akka中使用Scala。此外，如果我每做一点更改就播放位图，这将是一个特别占用资源的项目。就像上面建议的那样，我只能广播位图本身的更改（与许多用户同步似乎很复杂）。你知道如何检查画布中的更改吗？这样，我只会广播更改？@Alexander Ventura:在mousedown上，我会创建带有图形的位图，在mouseup上，我会将该位图打包为PNG并发送。PNG在压缩几乎为空的位图时非常有效。我建议你先试试这个，然后如果你发现问题，再进一步优化它。我目前正在做这方面的工作，其实一点也不坏。这比我预期的要快得多。