4

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!

Salmonela
  • 77
  • 2
  • 6
  • possible duplicate of [How do I load binary image data using Javascript and XMLHttpRequest?](http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest) – Naftali Jul 12 '11 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 Jul 12 '11 at 17:03
  • Can you simply set the src of an image tag to your php file? – fehays Jul 12 '11 at 17:10
  • @fehays then it wouldn't be an HTTP "POST" transaction. – Pointy Jul 12 '11 at 17:13
  • @Pointy true, but i'm suggesting changing that. maybe it would be best to redesign the code and use a "GET" – fehays Jul 12 '11 at 17:18
  • @fehays, just to clarify, i'm doing an image manipulation on the server side and i want to post it back to the client. since i don't want to reload the all page, i must use ajax so setting will not do. – Salmonela Jul 13 '11 at 14:34
  • What if you just change the img src and pass the values you need in yourscript.php via url parameters to stream back the image? This should reload the image without reloading the whole page. – fehays Jul 13 '11 at 16:39
  • Here is a question/answer that might help you: http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest Or see this post: http://blog.calyptus.eu/tags/binary-javascript/ – Naftali Jul 12 '11 at 16:58

1 Answers1

6

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;');
    });
});
fehays
  • 3,147
  • 1
  • 24
  • 43