javascript draw image into html from buffer (nodejs/socket.io)

Question

(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 complete 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 "complete" including the headers of the PNG image.

The server use thrift to communicate 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.

Solution 1

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.

Solution 2

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

Comments

[jcolebrand]

but that has NOTHING to do with what I said. you don't put "localhost:8080/" in front of it. You only put the data url. en.wikipedia.org/wiki/Data_URI_scheme

[Stoive]

Ummm, that data URI looks kind of wrong... half-way between a CSS one and a normal one. It's appending localhost:8080 because that's the location the main page is being loaded from, and the src attr is being interpreted as a relative URL.

[matiasfha]

I change my receiveImage function like you comment @Stoive, but this write in the webpage a string like a "binary" data and the image don't show.. so i use a Buffer to encode the image.data into base64 and push this data using socket.broadcast. In the webpage i get something like this:<img id="imagenes" src="data:image/png;base64,PNGIHDROIDATxKkzq7QBDP4Ob8sen9YvM‌​d3vfOA+.....A_LOT_OF‌​_DATA...mysnvmuJ8FbI‌​8tPhDIENDB" /> and no image is shown..

[matiasfha]

using the src attr like "data(PNGIHDRKIDAT......ENDB)" the browser try to point to localhost:8080/data() .. and obviously this don't exists.. but if i use de data url like in the wikipedia post data:image/png;base64,PNGIHDRKIDAT....ENDB the image don't show but no 404

[jcolebrand]

Well, moving from "404 on loading" to "doesn't show but no 404" sounds like a step in the right direction. I'm not sure how you're encoding is working, but it looks to me as tho you're encoding in base64 twice. That also, will not work. Lastly, you talk about this HEADER and TAIL, but there is no such thing in base64.

[jcolebrand]

Try this answer: stackoverflow.com/questions/3709391/…

[Stoive]

What is the image object that is passed to this function? I'm presuming that image.data is a Buffer object, am I wrong?