title: Sending and receiving imagepng output via json encode AJAX
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>So, how do I send it to the "success callback" just like the other variables I processed?  I read about how to use <code>ob_get_contents()</code> and I believe that is supposed to somehow store the image temporarily.  Is this how it works?</p>
  
  <p>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? </p>
  
  <pre><code>// more image manipulation code above
  
  ob_start();
  imagepng( $my_img );
  $imageData = ob_get_contents();
  ob_clean(); 
  
  $results = array(
  'price' =&gt; $_GET['priceX'],
  'imageprocessed' =&gt; base64_encode($imageData) &lt;&lt;&lt;  EDIT change based on answer.
  );
  
  $json = json_encode($results);
  echo $json;
  ?&gt;
  </code></pre>
  
  <p>EDIT:  This is the javascript used in the success callback to receive the base64_encode.  </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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;
  };
  &lt;/script&gt;   
  </code></pre>