I have a script that uses jQuery to POST data through AJAX to a PHP script, that uses that data to create a dynamic JPG image. The PHP script returns the binary image data as output using the PHP header image/jpeg mand (so far so good).

Now I want to display that image in the client, but I haven't been able to find a proper solution for this yet. After reading up a bit I understand a possible solution would be to have the PHP script encode it in base64 and return the string to the client as a data URI. However, that solution won't suffice because it is not supported by IE < 8 and still limited to 32K images in IE 8.

For the moment, I am writing the image to a temp dir on the server and return a filename to the client. However, there must be another way to solve this more elegantly through. Any advise on how I can use jQuery/JavaScript to display the returned binary image data in the browser?

Thanks!

I have a script that uses jQuery to POST data through AJAX to a PHP script, that uses that data to create a dynamic JPG image. The PHP script returns the binary image data as output using the PHP header image/jpeg mand (so far so good).

Now I want to display that image in the client, but I haven't been able to find a proper solution for this yet. After reading up a bit I understand a possible solution would be to have the PHP script encode it in base64 and return the string to the client as a data URI. However, that solution won't suffice because it is not supported by IE < 8 and still limited to 32K images in IE 8.

For the moment, I am writing the image to a temp dir on the server and return a filename to the client. However, there must be another way to solve this more elegantly through. Any advise on how I can use jQuery/JavaScript to display the returned binary image data in the browser?

Thanks!

• javascript
• jquery
• ajax
• image
• server-side

• Here is a question/answer that might help you: stackoverflow./questions/1095102/… Or see this post: blog.calyptus.eu/tags/binary-javascript – Naftali Commented Jul 12, 2011 at 16:58
• possible duplicate of How do I load binary image data using Javascript and XMLHttpRequest? – Naftali Commented Jul 12, 2011 at 16:58
• In your 1st part you say you are using the image headers in php, why cant u output it from the php file? – Naftali Commented Jul 12, 2011 at 17:03
• Can you simply set the src of an image tag to your php file? <img src="yourscript.php" /> – fehays Commented Jul 12, 2011 at 17:10
• @fehays then it wouldn't be an HTTP "POST" transaction. – Pointy Commented Jul 12, 2011 at 17:13

1 Answer 1

Per my ment, here's what I had in mind. This could possibly be a solution for you, but certainly it depends on your code.

You could create the img tag dynamicaly and pass url parameters to your php script instead of doing an ajax post. The code below only writes out what the img tag would look like since I don't really have a php script that does it.

Here's a fiddle: http://jsfiddle/fehays/954zK/

img script param: <input type="text" /><br />
<button>click</button><br />
<div id="imgText"></div>

$(function() {
    $('button').click(function() {         
        $('#imgText').html('&lt;img src="imagecreator.php?param=' + $('input').val() + '" /&gt;');
    });
});