Sending/Displaying a base64 encoded Image

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 i开发者_运维技巧nstance, 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.

If you set content-type to image/jpeg, you should give just the jpeg data, without the base64 crap. But you're treating the result as if it was html.

You're effectively building a data uri, which is ok, but as you noted, only as an uri. So leave the content type as it is (text/html), and

echo '<img src="data:image/jpeg;base64,'.base64_encode($image_data).'">';

and you're good to go.

I believe it can be done quite efficiently just using php only ... you can use the below function to render images in base64 encoded data

    function binaryImages($imgSrc,$width = null,$height = null){
    $img_src = $imgSrc;
    $imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
    $img_str = base64_encode($imgbinary);

    if(isset($height) && isset($width))
    {
    echo '<img src="data:image/jpg;base64,'.$img_str.'" height="'.$height.'" width="'.$width.'"/>';
    }
    else
    {
    echo '<img src="data:image/jpg;base64,'.$img_str.'"/>';
    }
}

how to use this function

    binaryImages("../images/end.jpg",100,100); 

run the function binaryImages .. 1st parameter is the image path , 2nd is the width and then the height ... height and width are optional

In this case, there is no reason to base64 encode the image data in the first place. What you want to emit is plain old image data.

Just pass through the JPEG image as-is.

The only way this would make sense to me is if you grabbed the output of generate.php via an AJAX call, and put the result into the src property directly. That should work (although not in IE < 8, but I'm sure you know that). But if you can call generate.php directly as the image's source, I don't see the need for this.

i would recommend it: base64_encode Encodes data with MIME base64

echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'">';