node.js - javascript draw image into html from buffer (nodejssocket.io) - Stack Overflow

admin管理员组

文章数量:1305107

(sorry for my english) Hi, i have an appplication created with nodejs to push image data into a webpage.

the data from nodejs server is pushed into webpage using socket.io

This data is the plete image, i try to write to disc to see the image and is good. The data is put into a buffer to encode in base64 then send to the webpage and i try to show using 'data:image/png;base64,'+data but nothing happend... The data seems to be "plete" including the headers of the PNG image.

The server use thrift to municate with another client (this in C++), this client create the images and send to the nodejs-thrift server, when a image is receive, the nodejs-socket.io server push into webpage.

some code: serverside

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

In the webpage i try to load the image using the on.message callback of socket.io

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

But i can't see the image.. The obj.data.toString('base64') create a string like this:

 PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq ............
 .............
 /NIlWDHUDmIPdHIEND

is the all data of the image..

how can i show the image?? (maybe using img tag or into canvas)

Thanks in advance.

EDIT: Some changes to code, but nothing change.. my guess.. the image don't show because the data (PNGIHDRKIDATxYw......PdHIENDB) isn't the correct data.. i search about this and the png data used to show images inline is diferent (without the header PNGIHDRKIDAT and the tail ENDB), i remove the header and tail and don't show .. maybe the data i receive isn't correct, but if i try to write to filesystem in the server side using nodejs (fs) i get the correct images (with fs.writeFileSync("imagen.png",image.data.toString('binary'),'binary') ) using binary encode, but with base64 encode theres no image.

(sorry for my english) Hi, i have an appplication created with nodejs to push image data into a webpage.

the data from nodejs server is pushed into webpage using socket.io

This data is the plete image, i try to write to disc to see the image and is good. The data is put into a buffer to encode in base64 then send to the webpage and i try to show using 'data:image/png;base64,'+data but nothing happend... The data seems to be "plete" including the headers of the PNG image.

The server use thrift to municate with another client (this in C++), this client create the images and send to the nodejs-thrift server, when a image is receive, the nodejs-socket.io server push into webpage.

some code: serverside

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

In the webpage i try to load the image using the on.message callback of socket.io

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

But i can't see the image.. The obj.data.toString('base64') create a string like this:

 PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq ............
 .............
 /NIlWDHUDmIPdHIEND

is the all data of the image..

how can i show the image?? (maybe using img tag or into canvas)

Thanks in advance.

EDIT: Some changes to code, but nothing change.. my guess.. the image don't show because the data (PNGIHDRKIDATxYw......PdHIENDB) isn't the correct data.. i search about this and the png data used to show images inline is diferent (without the header PNGIHDRKIDAT and the tail ENDB), i remove the header and tail and don't show .. maybe the data i receive isn't correct, but if i try to write to filesystem in the server side using nodejs (fs) i get the correct images (with fs.writeFileSync("imagen.png",image.data.toString('binary'),'binary') ) using binary encode, but with base64 encode theres no image.

• javascript
• node.js
• socket.io

Share Improve this question Follow edited Jun 2, 2011 at 14:28 matiasfha asked Jun 1, 2011 at 21:58 matiasfhamatiasfha 1,29044 gold badges2323 silver badges4242 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

In the C++ side (where i create the images and send them to the nodejs server). I need to encode the data in base64. Then in node i get this data put into a buffer with base64 encoding and send it to the webpage.

Your client side code looks fine (except for the fact that .toString('base64') doesn't do anything to a String object whilst in-browser, only to Buffer objects in node), I'm making a guess that the problem is in receiveImage, which should be:

var receiveImage = function(image,success) {
    socket.broadcast({
        data: image.data.toString('base64'),
        width: image.width,
        height:image.height
    });
    success(true);
}

It has been my experience that a base64 string of an image should be loaded with a data url like so:

<img alt="some image" src="data(PNGIHDRKIDATxYw5L1LlFMM/migzWUadOadLUd+43PIfPU9VU5AJAg3dIWUmHAMajS8GUuq .........)" />

本文标签： nodejsjavascript draw image into html from buffer (nodejssocketio)Stack Overflow