I need to send a base64 encoded string to a client. Therefore, I'm opening and reading an image file on the server, encode it and send that data along with the image/jpeg content-type to the browser.
Example in php:

$image      = $imagedir . 'example.jpg';

$image_file = fopen($image, 'r');

$image_data = fread($image_file, filesize($image));



header(Content-type: image/jpeg);

echo 'data:image/jpeg;base64,' . base64_encode($image_data);

Clientside, I'm calling:

var img     = new Image();

img.src     = http://www.myserver.com/generate.php;

img.onerror = function(){alert('error');}

$(img).appendTo(document.body);

That does not work for some reason. onerror always fires. Watching the FireBug Network task for instance, tells me that I'm receiving the correct header information and a correct value of transfered bytes.

If I send that data as Content-type: text/plain it works, the base64 string is shown in the browser (if I call the script directly). Copying and pasting that output into the src of a <img> element shows the image as expected.

What am I doing wrong here?

Solution

Thanks Pekka for pointing me on my mistake. You don't need (you can't!) encode that binary image data as base64 string in that kind of approach. Without base64 encoding, it just works.