Using jQuery / javascript to display the image created by the server

Question

I have a script that uses jQuery for POST data via AJAX for a PHP script that uses this data to create a dynamic JPG image. The PHP script returns binary image data as output using the image / jpeg command of the PHP header (how good it is).

Now I want to display this image in the client, but so far I have not been able to find a suitable solution for this. With a little thought, I realized that a possible solution would be for a PHP script to encode it in base64 and return the string to the client as a data URI. However, this solution is not enough because it is not supported by IE <8 and is still limited to 32K images in IE 8.

At the moment, I am writing an image to the temp directory on the server and returning the file name to the client. However, there should be another way to solve this problem more elegantly. Any tips on how I can use jQuery / JavaScript to display the returned binary image data in a browser?

Thanks!

Answer 1

In my comment, this is what I had in mind. This may be the solution for you, but of course it depends on your code.

You can create a dynamic img tag and pass url parameters to your php script instead of an ajax entry. The code below only writes what the img tag will look like, since I really don't have a PHP script that does this.

Here's the script: 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;'); }); });