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

Sending canvas element over socket, maximum stack size in JS

本文关键字：JS 大堆栈 元素 套接字 布元素      更新时间：2023-09-26

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

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序列化）。但是画布元素无法序列化。

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

然后在听力方面，你会：

  • 接收数据URL
  • 将数据URL转换为新的图像对象
  • 使用context.drawImage将新的图像对象绘制到接收器的画布上
相关文章：