將上傳的圖像分享到多個用戶的畫布

我正在與節點和套接字協作應用程序，我可以將圖像上載到畫布。如果其中一個連接的用戶上傳圖像，我如何才能將該圖像提取給所有連接的用戶？將上傳的圖像分享到多個用戶的畫布

這是我的嘗試：

客戶

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

來源

2017-04-19 Pedro

您發送有關圖像的消息，但你」不發送圖像本身... – jcaron

我應該改變什麼？ – Pedro

以某種方式發送圖像... – jcaron

當你發射，你需要沿着以及發送圖像數據。例如，您可以發送圖像的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); 
});

來源

2017-04-19 21:52:04

感謝您的回答，我已添加數據網址，如您的示例中，是否需要在'img.src = e.target.result;'中添加其他內容？ – Pedro

沒問題。你不需要改變它，因爲它是圖像的本地副本 - 它仍然應該在'e.target.result'上運行。 –

在安裝過程中還有很多其他的東西可能會出錯，我的回答涵蓋的問題是在您發佈的代碼中可見。我建議在發起者，服務器和接收客戶端上記錄dataURL，並確保每個人都看到URL。從那裏，這只是一個調試爲什麼它不能正確渲染的問題。 –

將上傳的圖像分享到多個用戶的畫布

回答

相關問題