(对不起我的英语)嗨,我有一个用nodejs创建的应用程序,可以将图像数据推送到网页中。
nodejs服务器的数据使用socket.io 推送到网页
这个数据是完整的图像,我试着写到光盘上看图像,效果很好。数据被放入缓冲区以在base64中编码,然后发送到网页,我尝试使用'数据:图像/png;base64,'+数据但什么也没发生。。。数据似乎是"完整的",包括PNG图像的标题。
服务器使用节俭与另一个客户端通信(这在C++中),该客户端创建图像并发送到nodejs-socket.io服务器,当接收到图像时,nodejs-shocket.i0服务器将其推入网页。
某些代码:服务器端
var http = require('http'),
url = require('url'),
fs = require('fs'),
sys = require('sys');
var hserver = http.createServer(function(request,response){
var path = url.parse(request.url).pathname;
switch(path){
case '/':
fs.readFile(__dirname + '/index.html',function(err,data){
if(err) return send404(res);
response.writeHead(200,{'Content-Type':'text/html'});
response.write(data,'utf8');
response.end();
});
break;
default: send404(response);
}
}),
send404 = function(res){
res.writeHead(404);
res.write('404');
res.end();
};
hserver.listen(8080);
var io = require('socket.io');
var socket = io.listen(hserver);
//this is the function in the Thrift part to send the image data to webpage using socket.io
var receiveImage = function(image,success){
buff= new Buffer(image.data.toString('base64'),'base64');
socket.broadcast({
data: buff.toString('base64'),
width: image.width,
height: image.height
});
success(true);
}
在网页中,我尝试使用socket.io 的on.message回调加载图像
<script>
var socket = new io.Socket(null,{port:8080});
socket.connect();
socket.on('message',function(obj){
document.getElementById('imagenes').src='data:image/png;base64,'+obj.data.toString();
});
socket.on('connect',function(){
document.getElementById('stream').innerHTML = "Conectado!"
});
</script>
但是我看不到图像。。obj.data.toString('base64')创建一个字符串,如下所示:
PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq ............
.............
/NIlWDHUDmIPdHIEND
是图像的所有数据。。
我该如何显示图像??(可能使用img标签或进入画布)
提前谢谢。
编辑:对代码进行了一些更改,但没有任何更改。。我猜。。图像没有显示,因为数据(PNGIHDRKIDATxYw……PdHIENDB)不是正确的数据。。我搜索了一下,用于在线显示图像的png数据不同(没有标题PNGIHDRKIDAT和尾部ENDB),我删除了标题和尾部,不显示。。也许我收到的数据不正确,但如果我尝试使用nodejs(fs)写入服务器端的文件系统,我会使用二进制编码获得正确的图像(使用fs.writeFileSync("imagen.png",image.data.toString("二进制"),"二进制",),但使用base64编码没有图像
在C++端(我在那里创建图像并将它们发送到nodejs服务器)。我需要用base64对数据进行编码。然后在节点中,我将这些数据放入base64编码的缓冲区,并将其发送到网页。
您的客户端代码看起来很好(除了.toString('base64')
在浏览器中对String
对象不做任何事情,只对节点中的Buffer
对象做任何事情之外),我猜测问题出在receiveImage
中,应该是:
var receiveImage = function(image,success) {
socket.broadcast({
data: image.data.toString('base64'),
width: image.width,
height:image.height
});
success(true);
}
根据我的经验,图像的base64字符串应该加载这样的数据url:
<img alt="some image" src="data(PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq .........)" />