html - 如何捕获 Canvas 中的微小变化并将其发送给所有相互连接且也在使用该 Canvas 的用户？

Question

我想让人们通过 html5 canvas 进行交流。如果一个人在他的 Canvas 上绘画，另一个人应该能够同时看到它，反之亦然。

我使用node.js作为带有express框架和socket.io的服务器。

有像.toDataURL这样的方法，其他方法是将其转换为blob然后发送。但这些方法将整个 Canvas 转换为图像，然后通过 websockets 发送它们。

有没有一种有效的方法可以让我只发送创建的新数据或在 Canvas 中所做的更改，而不是创建图像然后再次发送给所有用户？

跟踪像素是否更好？

Answer 1

“将整个 Canvas 转换为图像的方法” - 您需要发送用户交互，而不是发送 Canvas 数据(图像)。

正确的方法是首先记录用户操作(单击、拖动等)，将它们序列化，然后将它们发送给共享此 Canvas 的其他用户。接收者必须在其 Canvas 上回放接收到的操作，以提供共享 Canvas 的效果。

您可能会发现这很有用:http://ramkulkarni.com/blog/deserializing-recordings-in-recordable-html5-canvas/