Question

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 command (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!

Answer 1

Per my comment, 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.net/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;');
    });
});