Zeichnen eines Bildes, das von Client-Socket mit Javascript gesendet wird

Ich versuche, einen Dienst zu erstellen, der Client ein Bild an den Server senden und auf der Website anzeigen kann. Im Moment war es mir gelungen, ein Bild vom Client über den Socket zu senden. Im Folgenden ist der Ausschnitt aus meinem Client und ServerZeichnen eines Bildes, das von Client-Socket mit Javascript gesendet wird

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(){ 
 
\t console.log('Connect to server'); 
 
\t setInterval(function(){emitpic()}, 30);}); 
 

 

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

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){ 
 
\t console.log("got one client"); 
 
    socket.on('profile-image', function(stream, data){ 
 
\t  
 
     if(data.image){ 
 
     
 
\t  var url = 'data:image/jpeg;base64,' + data.buffer;  
 

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

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

Nun, alles sieht gut aus zwischen Client und Server, aber das Problem ist, dass ich das Bild auf der Leinwand zeichnen möchte. Es folgt mein 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) { 
 
\t console.log('connected'); 
 
    \t var ctx = document.getElementById('myCanvas').getContext('2d'); 
 
\t var img = new Image(); 
 
    \t img.src = url; 
 
    \t ctx.drawImage(img, 10, 10); 
 

 
}); 
 

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

ich denke, das Teil in html nicht funktioniert:

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

 
});

Hat jemand eine Ahnung haben, was die Problem? Vielen Dank für Ihren Patienten.

Quelle

2016-06-21 Jason C

ich dieses Problem gelöst, indem bewegt socket.emit evernt aus socket.on Ereignis wie folgt:

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

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

Es funktioniert wie Champ, aber ich weiß nicht, was diese anders machen.

Quelle

2016-06-23 06:14:49

Verwenden onload Falle <img> Element finden CanvasContext2D drawImage() issue [onload and CORS]

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

Quelle

2016-06-21 06:38:58 guest271314

Hallo, danke für deine prompte Antwort, aber es löst immer noch nicht den Fall. Ich denke, das ist vielleicht nicht das Hauptproblem. die 'console.log (' verbunden ');' auch nicht ausgeführt wurde, so denke ich, das Problem ist auf Socket-Ereignis, nicht Zeichenfunktion. –

@JasonC Was ist 'data.buffer'? – guest271314

data.buffer sind die empfangenen Daten, die vom Client ausgegeben werden, siehe 'client.js' 'client.emit ('profile-image', stream, {image: true, buffer: buf.toString ('base64')}); ' Der Empfangsteil ist in server.js: ' socket.on ('Profilbild', Funktion (Strom, Daten) {... ' –

Zeichnen eines Bildes, das von Client-Socket mit Javascript gesendet wird

Antwort

Verwandte Themen