Ajax and returning image created by PHP GD

Question

I have a PHP script that generates an image with PHP GD. After it generates the image, it saves it, and send this output when called by Ajax:

imagejpeg($img_data, 'filename.jpg'); echo '<img src="/filename.jpg.jpg">';

And after that, the image is shown on the page, and everything is fine. But, I don't want to create an image every time. Is there some way that I return by Ajax only $raw_data string and show the image? I tried like this:

echo $img_data;

But no luck, only thing that is returned is a few ?.

Here is my jQuery Ajax code:

$.ajax({ type: 'POST', data: { action: 'update_image', //some instructions for creating the image }, url: 'script.php', success: function(msg) { $('#somediv').append(msg); } });

romo · Accepted Answer · 2012-08-27 15:46:11Z

base64 encode the image and return that, then you can do an <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA......." />

On the PHP side

$image = base64_encode($imageGDRender); echo json_encode(array('image'=>$image));

That will return your json back to your jquery

then on the ajax side

$.ajax({ ... success: function(data) { var base64Image = data.image; ...now put it in your image $('#image').attr('src','data:image...'+base64Image); })....

I am unsure how to implement this? As I can google about this, i need some "json encoding" to achieve this or something like that?
Tnx, but still instead of image data, i get "undefined". But this helped me to search in right place. I put solution in answer below.

SomeoneS · Accepted Answer · 2012-08-27 16:19:23Z

Here is solution:

PHP code:

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

On user side (in JQuery):

success: function(data) { $('#somediv').append(data); }

Michael Laffargue · Accepted Answer · 2012-08-27 15:01:44Z

0

You should modify the header before doing the echo $img_data;

header("Content-Type: image/jpeg"); header("Content-Length: " .sizeof($img_data));

answered Aug 27, 2012 at 15:01

Michael Laffargue

10.3k6 gold badges46 silver badges76 bronze badges

1 Comment

SomeoneS Over a year ago

Result is same when i do this, nothing changes.

Collectives™ on Stack Overflow

Ajax and returning image created by PHP GD

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Related