Wednesday, 19 April 2017

Share uploaded image to canvas between multiple users

I am doing a collaborative app with node and sockets where I can upload images to canvas. If one of the connected users uploads a image, how can I make that image to be drawn to all the connected users?

This is what i tried:

Client

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

Server

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



via Pedro

No comments:

Post a Comment