Question

我正在使用节点和套接字进行协作应用，我可以将图像上传到画布。如果其中一个连接的用户上传了图像，我该如何将该图像绘制到所有连接的用户？

这是我试过的：

客户端

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设置的图像添加到该数据网址。 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);
});

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

1 个答案: