Handling Images From Xmlhttprequest (with Html And Javascript)

I am using an XMLHttpRequest to fetch an image from a server (run locally from a third party server-applet) A simplified version of the code is shown below. The image is returned a

Solution 1:

You can use inline images

on server side encode your response in base64

in php use base64_encode("your data") and in javascript

result = document.getElementById('results');result.innerHTML = '<img src="data:image/gif;base64,' + xmlhttp.responseText + '"/>';

Solution 2:

W3C is working on File API and XMLHttpRequest Level 2 to provide a unified experience with Blob for your requirement. You may want to investigate if any existing browser has implemented this feature.

Solution 3:

Seems like the easiest thing to do would be to set up a local proxy service that you can access via a GET and URL parameters, and on the back end it does the POST to the original image service, receives the image data back, and passes it back to you. Then you just put the URL of your proxy (with parameters) into the img src attribute.

<imgsrc="http://myproxy/foo.jpg?param1=bar&param2=baz" />

The proxy at myproxy POSTs a request to the image servlet accordingly.

Solution 4:

Do you have to use Ajax? Why not just add an image to your DOM? When I type the following code in to my debugger in chromium it appends the PHP logo to the current page:

document.body.appendChild(document.createElement('img')).setAttribute('src', 'http://static.php.net/www.php.net/images/php.gif');

?