Use image data from XMLHttpRequest responsetext to display image

Question

I'm using JavaScript to get an image from the XMLHttpRequest response text and set the image src to it:

document.getElementById("img").src = "data:image/png;base64," +  xhr.responseText;

From the nodejs script, the image is sent like:

var img = fs.readFileSync('image.png');
res.end(img, 'base64');

The response text doesn't come in base64 and has weird symbols:

�PNG��IHDR��,��2PLTE ��@��Ai��

...

I found this question and tried to convert it to base 64:

for (var responseText = xhr.responseText, responseTextLen = responseText.length, bin = "", i = 0; i < responseTextLen; ++i) {
    bin += String.fromCharCode(responseText.charCodeAt(i) & 255);
}
document.getElementById("img").src = "data:image/png;base64," + btoa(bin);

The result was:

img id="img" src="data:image/png;base64,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">

The image still doesn't show. What am I doing wrong?

have you considered to send the image directly and read it as a `blob` from the browser? [this](http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob) post for reference — , Aug 14 '15 at 07:59
You need to do the base64 encoding on the server side, not the client side. I'd say that `res.end(img, 'base64');` doesn't do what you think it does - ie, its *not* base64 encoding `img`. — Dal Hundal, Aug 14 '15 at 08:09

Coffee'd Up Hacker · Accepted Answer · 2015-08-15T05:49:02.497

It sounds like you're looking for buf.toString([encoding][, start][, end]).

Consider the following code:

var fs = require('fs');
var base64_image = fs.readFileSync('image.png').toString('base64');

console.log(base64_image);

This will return image.png as a base64 encoded string in the console.

So you probably want to remove that for () loop and change:

var img = fs.readFileSync('image.png');

To this:

var img = fs.readFileSync('image.png').toString('base64');

I hope that helps!

score 0 · Answer 2 · answered Aug 14 '15 at 08:30

As Dal suggested, I did the base64 encoding on the server side:

var img = fs.readFileSync('plot.png', 'base64');
res.end(img);

I added the 'base64' encoding option to the readFileSync() instead of the res.end() so img would get sent as a string instead of a buffer as described here.

On the client side, I used this:

document.getElementById("img").src = "data:image/png;base64," + xhr.responseText;

Use image data from XMLHttpRequest responsetext to display image

2 Answers2