Sending and receiving imagepng output via json encode AJAX

Question

I created a PNG image using PHP GD Library, added some text based on user input, and instead of saving it, I want to display it until user commits to changes.

They will add a few words, change a font, etc. so it needs to display their changes. The only way I got this to work is to save the image to the server, but it saves dozens of images for dozens of slight changes the user makes. I need to either overwrite the file, or do the below idea if it is proper. The idea would be to create a temp file to manipulate.

So, how do I send it to the "success callback" just like the other variables I processed? I read about how to use ob_get_contents() and I believe that is supposed to somehow store the image temporarily. Is this how it works?

How do I display the image on the form page (not the processing PHP page) and is this a good plan to prevent saving to the server until the user commits?

// more image manipulation code above

ob_start();
imagepng( $my_img );
$imageData = ob_get_contents();
ob_clean(); 

$results = array(
'price' => $_GET['priceX'],
'imageprocessed' => base64_encode($imageData) <<<  EDIT change based on answer.
);

$json = json_encode($results);
echo $json;
?>

EDIT: This is the javascript used in the success callback to receive the base64_encode.

<script type="text/javascript">
function doGen(){
var priceX = $('#couponprice').val();

$.get('processimage.php',
{priceX:priceX}, 
function(data) {
var imgFldr = '/images/';                   
data = $.parseJSON(data);
$('.price-placeholder').html(data.price);
var imageCallback = (data.couponnamecall);
$('#couponbuilt img').attr('src', 'data:image/jpeg;base64,' + imageCallback);
// ...
});
return false;
};
</script>   

Answer 1

You could base64encode($imageData).

On the client side you simply create an data url out of the base64 encoded data and pass it into the src-attribute of an image tag.

I tested it out:

PHP code

ob_start();
imagepng($my_img);
$imageData = ob_get_contents();
ob_clean(); 

$results = array(
  'price' => $_GET['priceX'],
  'image' => base64_encode($imageData)
);

$json = json_encode($results);
echo $json;

Javascript code:

$.getJSON("/ajax-script.php", function(data) {
  $("#element").append($("<img />").attr('src', 'data:image/png;charset=utf8;base64,' + data.image));
});

Answer 2

You don't need json or XHR ('ajax') for that.

The simplest approach is to simply create the image on-the-fly, and request it the new one by changing the src of your image to a PHP file that produces the image on-the-fly.

You can do this in several ways. The simplest is described here: If the data in your form isn't much (No kilobytes of text and such), then you can simply set the src of a preview-image to the URL of your PNG producing script. So your img src is a PHP script, NOT a stored static png-file.

Make sure your receiving PHP script sends the right headers (image/png), and you are ready to go. You'll need some JavaScript to assemble the URL, and put that into the img src.

In case you want to make the image permanent, simply add an extra name/value pair to the url, like storepermanent=yes