jpGraph - How to send image through POST call

Question

On client side there is jQuery script sending POST request to example.php.

$.post('example.php', function(data) {
    var $newImg = $('<img src="' + data + '"/>');
    $('#placeholder').html($newImg);
});

Example PHP should return image data encoded with base64_encode, but something goes wrong. Here is part of example.php:

$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);
$image_data = $graph->img->Stream();

$str = "data:$contentType;base64," . base64_encode($image_data);
echo $str;
exit;

Edit: On client side, instead of image there is a lot of characters:

I couldn't imagine what is problem here. I already did sending image data through POST but with other library. Can someone help me with this?

EDIT2 It looks like returned image data has > in it so it's divided into image + custom tag. Look this: EDIT3: I'am sorry, I made mistake. I'am researching chart libraries, and I was wrong because I posted in title that have problem with PHPlot, actually I have problem with jpGraph chart library. Again, sorry for this. I still have solution but for jpGraph.

EDIT4: If I try Lightness Races in Orbit's code:

$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

ob_start();                        // start buffering
$graph->img->Stream();             // print data to buffer
$image_data = ob_get_contents();   // retrieve buffer contents
ob_end_clean();                    // stop buffer

echo "data:$contentType;base64;" . base64_encode($image_data);

I get this in browser:

In the firebug I see this:

Answer 1

In your Javascript

Firstly, you're not HTML-escaping data. Clearly something — probably a / character, which is index 63 in the base-64 system — is closing the img tag, which is why you see so much of the data spill out into the surrounding text.

Use a technique that doesn't require you to, by not writing HTML yourself but manipulating the DOM directly:

$.post('example.php', function(data) {
    var $newImg = $('<img />');
    $newImg.attr('src', data);   // <----- just string, not HTML, input
    $('#placeholder').html($newImg);
});

---

In your PHP

Additionally, as @Cheeky points out and as the manual's examples demonstrate:

 $image_data = $graph->img->Stream();
 // ^                          ^
 // |                          + outputs image data
 // + nothing assigned

Your use of Stroke is not needed; that would allow you to write to a file or to get the GD handle, but since neither GD nor jpGraph allow to you obtain the image buffer directly, this is no use to you.

So, you have to write a workaround.

You could go directly:

<?php
$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

echo "data:$contentType;base64,";  // print prefix
$graph->img->Stream();             // print data
?>

The problem with this, though, is that your data is no longer base-64 encoded. PHP's output buffering features will resolve this:

<?php
$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

ob_start();                        // start buffering
$graph->img->Stream();             // print data to buffer
$image_data = ob_get_contents();   // retrieve buffer contents
ob_end_clean();                    // stop buffer

echo "data:$contentType;base64," . base64_encode($image_data);
?>

A bit verbose, but jpGraph doesn't appear to have a built-in way around that.