javascript - 在多个用户之间共享上传的图像到 Canvas

Question

我正在制作一个带有 Node 和套接字的协作应用程序，我可以将图像上传到 Canvas 。如果其中一个连接的用户上传了一张图像，我如何才能将该图像绘制给所有连接的用户？

这是我尝试过的:

客户端

socket.on('img', 
        function() {
        console.log("Image uploaded");
        ctx.drawImage(img, 105, 50);
        }
    );

function el(id){return document.getElementById(id);}
    function readImage() {
        if ( this.files && this.files[0] ) {
            var FR= new FileReader();
            FR.onload = function(e) {
               var img = new Image();
               img.onload = function() {
                   var image = ctx.drawImage(img, 105, 50);
                   console.log("sendimg: ");
                   socket.emit('img');
               };
               img.src = e.target.result;
            };       
            FR.readAsDataURL( this.files[0] );
        }
    }
    el("fileUpload").addEventListener("change", readImage, false);

服务器

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

Answer 1

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

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

然后，您可以添加图像，并将 src 设置为该数据 URL。 Different image formats are available if you prefer

然后您需要更新客户端以处理该参数:

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);
});