アップロードした画像を複数のユーザーの間でキャンバスに共有

Question

キャンバスに画像をアップロードできるノードとソケットを使用して共同アプリケーションを作成しています。接続されたユーザーの1人が画像をアップロードすると、その画像をすべての接続済みのユーザーに描画させるにはどうすればよいですか？

これは私が試したものです：あなたが発するとき

クライアント

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

は、あなたにも沿って画像データを送信する必要があります。あなたはそのデータのURLにsrc設定して画像を追加することができます

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

：たとえば、画像のbase64でエンコードされたバージョンを送信することができます。 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); 
});