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

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 元素无法序列化。

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

那么在听力方面，你会：

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

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

Sending canvas element over socket, maximum stack size in JS

html

javascript

socket.io

html5-canvas