javascript - 通过套接字发送 Canvas 元素，JS中的最大堆栈大小

我遇到以下问题：我想使用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

谢谢你的帮助

最佳答案

您不能发出DOM元素（您的myCanvas）。

Socket.IO通过序列化其发送的内容进行工作（主要使用JSON序列化）。但是canvas元素无法序列化。

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

然后，在收听方面，您将：


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

关于javascript - 通过套接字发送 Canvas 元素，JS中的最大堆栈大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29194581/