Question

我正在尝试构建一个服务，客户端可以将图像发送到服务器并在网站上查看。现在，我已成功通过套接字从客户端发送图像。以下是我的客户端和服务器的片段

client.js

＆＃13;

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

＆＃13;

server.js

＆＃13;

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

＆＃13;

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

＆＃13;

嗯，客户端和服务器之间的每一件事看起来都很棒，但问题是我想在画布上绘制图像。以下是我的HTML

＆＃13;

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

＆＃13;

我认为html中的这部分不起作用：

＆＃13;

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

＆＃13;

有没有人知道这个问题是什么？谢谢你的病人。

Answer 1

使用onload元素的<img>事件，请参阅CanvasContext2D drawImage() issue [onload and CORS]

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

Answer 2

我解决了这个问题，方法是将socket.emit永远移出socket.on事件，如下所示：

＆＃13;

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

＆＃13;

它像冠军一样，但我不知道是什么让这些与众不同。

使用javascript绘制从客户端套接字发送的图像

2 个答案: