Drawing an image which is sent from client socket using javascript

Question

I am trying to build a service which client can send an image to server and view on website. For now, I had succeed to send image from client via socket. Following is the snippet of my client and server

client.js

var fs = require('fs');
var express = require('express');
var io = require('socket.io-client');
var ss = require('socket.io-stream');
 
var client = io.connect(${myIP});
var stream = ss.createStream();
var filename = './image/tmp.jpg';

client.on('connect', function(){
 console.log('Connect to server');
 setInterval(function(){emitpic()}, 30);});


function emitpic(){
 fs.readFile(filename, function(err, buf){
 client.emit('profile-image', stream,{image: true, buffer: buf.toString('base64')});
 console.log('image file is initialized'); 
 });
}

server.js

var express = require('express');
var io = require('socket.io');
var fs = require('fs');
var app = express();

app.use(express.static("."));
app.use(bodyparser.urlencoded({extended:true}));

var port = 1234;
var server = app.listen(port, function(){
   console.log('server up:'+ port);
});


var sio = io(server);

sio.on('connection', function(socket){
 console.log("got one client");
    socket.on('profile-image', function(stream, data){
    
      if(data.image){
        
       var url = 'data:image/jpeg;base64,' + data.buffer;     

       socket.emit.broadcast('liveCamm', 'data:image/jpeg;base64,' + data.buffer ,function(err, msg){
   console.log(err);
       console.log(msg);
       });
       
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Well, every thing look great between client and server, but the problem is that I want to draw the image on the canvas. Following is my html

<html>
<head>
</head>
<body>
<h1>streaming</h1>

<canvas name = "myCanvas" id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas><br>


<script src="http://code.jquery.com/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
var socket = io();

socket.on('liveCam', function(url) {
 console.log('connected');
  var ctx = document.getElementById('myCanvas').getContext('2d');
 var img = new Image();
     img.src = url;
     ctx.drawImage(img, 10, 10);

});

</script>
</body>
</html>

I think this part in html doesn't work:

socket.on('liveCam', function(url) {
 console.log('connected');
  var ctx = document.getElementById('myCanvas').getContext('2d');
 var img = new Image();
     img.src = url;
     ctx.drawImage(img, 10, 10);

});

Does any one have any idea about what's the problem? Thanks for your patient.

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

Useonload event of <img> element, see CanvasContext2D drawImage() issue [onload and CORS]

var img = new Image();
    img.onload = function() {
      ctx.drawImage(img, 10, 10);
    }
    img.src = url;

edited May 23 '17 at 10:29

Community

1
1

answered Jun 21 '16 at 06:38

guest271314

1
15
104
177

Hi , thanks for your prompt reply, but it still not solve the case. I think this might not be the major problem. the 'console.log('connected');' also not been executed, so I think the problem is on socket event, not draw function. – Jason C Jun 21 '16 at 06:47
@JasonC What is `data.buffer`? – guest271314 Jun 21 '16 at 06:53
data.buffer is the received data which emit from client , please refer to 'client.js' `client.emit('profile-image', stream,{image: true, buffer: buf.toString('base64')});` The recieve part is in server.js: `socket.on('profile-image', function(stream, data){...` – Jason C Jun 21 '16 at 06:56
@JasonC Is `data.buffer` a `base64` string without `data:[][;base64],` portions? – guest271314 Jun 21 '16 at 07:05
Yes, I think so , `data.buffer` is derive from `fs.readFile(${IMG_FILE} , ...)` – Jason C Jun 21 '16 at 07:15
@JasonC _"Yes, I think so"_ Can you check? – guest271314 Jun 21 '16 at 07:20
I had wrote this buffer into text file, and it look like this: `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB ....` so, answer is "yes", thank you! – Jason C Jun 21 '16 at 10:07

score 0 · Accepted Answer · answered Jun 23 '16 at 06:14

I solved this problem by moved socket.emit evernt out of socket.on event as follow:

    socket.on('profile-image', function(data){
    if(data.image){
  data_g = data;
  urll = data.buffer;
     gotimage =true;
   }
       });

      socket.emit('liveCam', urll ,function(err, msg){
    console.log(err);
       console.log(msg);
 });
});

It works like champ, but I don't know what make these different.

Drawing an image which is sent from client socket using javascript

2 Answers2