Javascript 在多个用户之间将上载的图像共享到画布

我正在做一个带有节点和套接字的协作应用程序，在这里我可以将图像上传到画布。如果其中一个已连接的用户上载了一个图像，我如何才能将该图像绘制到所有已连接的用户

这就是我所尝试的：

客户

服务器

---

发射时，还需要发送图像数据。例如，您可以发送图像的base64编码版本：

img.onload = function() {
   var image = ctx.drawImage(img, 105, 50);
   console.log("sendimg: ");
   socket.emit('img', ctx.toDataURL());
};

然后可以将src设置为该数据URL的图像添加到该URL

然后需要更新客户端以处理参数：

socket.on('img', function(dataURL) {
    console.log("Image uploaded");
    var img = new Image;
    img.onload = function(){
      ctx.drawImage(img, 105, 50);
    };
    img.src = dataURL;

});

和您的服务器一起传递：

socket.on('img', function(dataURL) {
    console.log("Image Uploaded");
    socket.broadcast.emit('img', dataURL);
});

---

您正在发送有关图像的消息，但您没有发送图像本身…我应该更改什么？以某种方式发送图像…感谢您的回答，我已经添加了数据URL，如您的示例所示，是否需要在img.src=e.target.result；中添加其他内容？没问题。您不需要更改它，因为它是映像的本地副本-它仍应在e.target.result上运行。在设置过程中可能会出现许多其他错误，我的答案涵盖了您发布的代码中可见的问题。我建议将dataURL记录在发起人、服务器和接收客户端上，并确保每个人都能看到URL。从这里开始，这只是一个调试为什么不能正确渲染的问题。我将尝试找出它仍然缺少什么。谢谢你的更新；上传图像后，我得到以下错误：Uncaught TypeError:ctx.toDataURL不是HTMLImageElement.img.onload的函数。它指向答案中代码的第一部分中的ctx.toDataURL。

socket.on('img', function(dataURL) {
    console.log("Image uploaded");
    var img = new Image;
    img.onload = function(){
      ctx.drawImage(img, 105, 50);
    };
    img.src = dataURL;

});

socket.on('img', function(dataURL) {
    console.log("Image Uploaded");
    socket.broadcast.emit('img', dataURL);
});