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>

MarcDefiant · Accepted Answer · 2012-07-30T13:28:56.153

11

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));
});

edited Jul 30 '12 at 13:28

answered Jul 30 '12 at 13:12

MarcDefiant

6,649
6
29
49

Base64 encoded doesn't fully work on all browsers... However, you could save the image and then pass back the URL to the image. – Gavin Jul 30 '12 at 13:21
I tested it. The base64 thing is no problem if you use the php function. – MarcDefiant Jul 30 '12 at 13:29
Have you tested older browsers? Inline base64 images (i.e. data:image/png) are not fully supported in IE6. – Gavin Jul 30 '12 at 13:37
Mogria, your method worked perfectly and this is 90% inhouse. The clients that may be using it definitely have updated browsers. I will post the actual update in my original post but you hit the nail on the head. – LITguy Jul 30 '12 at 13:40

Erwin Moller · Answer 2 · 2012-07-30T13:32:09.347

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

I would definitely try this but I'm using the AJAX for numerous other operations on the same page so I was trying to find a way to do everything in one batch. — LITguy, Jul 30 '12 at 13:42

Sending and receiving imagepng output via json encode AJAX

2 Answers2