Display PNG image as response to jQuery AJAX request

Question

Is it possible to display an image returned by jQuery AJAX call, in the main stream of your HTML?

I have a script that draws an image with a header (image/PNG). When

Answer 1

Method 1

You should not make an ajax call, just put the src of the img element as the url of the image.

This would be useful if you use GET instead of POST

---

Method 2

If you want to POST to that image and do it the way you do (trying to parse the contents of the image on the client side, you could try something like this: http://en.wikipedia.org/wiki/Data_URI_scheme

You'll need to encode the data to base64, then you could put data:[][;charset=][;base64], into the img src

as example:

To encode to base64:

• in plain javascript, see How can you encode a string to Base64 in JavaScript?
• in perl http://perldoc.perl.org/MIME/Base64.html
• in php http://php.net/manual/en/function.base64-encode.php