Question

我遇到了以下问题：我想使用socket.io和Node.js在套接字上发送canvas元素。我在下面创建了（伪）代码：

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// open sockets connection, join to the room etc.
socket.on('message', function(message) {
   alert(message.canvas);
});
$(myCanvas).mouseup(function(e) {
    socket.emit('message', {
         canvas: myCanvas,
    });
});

不幸的是，第二个对等方没有收到消息，首先收到此错误：

Uncaught RangeError: Maximum call stack size exceeded

来自socket.io.js文件，第5380行

感谢您的帮助

Answer 1

您无法发出DOM元素（myCanvas）。

Socket.IO通过序列化它发送的任何东西（主要使用JSON序列化）来工作。但是无法序列化canvas元素。

您必须序列化画布内容才能发出它。例如，您可以使用myCanvas.toDataURL()创建表示画布内容的dataURL（字符串）。

然后在听力方面，你会：

收到dataURL，
将dataURL转换为新的Image对象
使用context.drawImage将新图像对象绘制到接收器的画布上。

在canvas上发送canvas元素，JS中的最大堆栈大小

1 个答案: