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

标签 html node.js canvas websocket socket.io

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

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

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

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

跟踪像素是否更好?

最佳答案

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

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

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

关于html - 如何捕获 Canvas 中的微小变化并将其发送给所有相互连接且也在使用该 Canvas 的用户?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20946068/

相关文章:

html - 动态 HTML 正文宽度(超过 100%)

python - 抓取表信息

javascript - 多次快速单击时,复选框按钮无法正常工作

javascript - 使用 javascript 使用react.js 更改 html

node.js - Gulp、Wiredep 和 Bower 依赖项

javascript - 检测和响应任何多边形内的球与墙碰撞

javascript - 如何从数组中的图像源创建 Canvas 图像?

html下载属性打开新标签而不是下载文件

Javascript 替换功能不会删除引号

javascript - 在 JavaScript 中按值复制 imageData