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