Image processing from XMLHttpRequest (with HTML and Javascript)

Question

I use XMLHttpRequest to retrieve an image from a server (executed locally from a third-party applet server)

The following is a simplified version of the code .

The image is returned as JPEG, and the returned header shows "content-type = image / jpg". I can view information through Firebug for Firefox.

However, I have a terrible time to display the actual image on the web page because it is image data returned from the NOT uri server to the image location.

What is the correct way to display this image from the returned data? Should I use the <span> tag or the <img> tag or the <magical-show-image-from-data> ?

 function getXML(url, postData, requestStateChangeHandler){ if(window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {//Code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = requestStateChangeHandler; xmlhttp.open("POST", url, true); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); xmlhttp.setRequestHeader('Cache-Control', 'no-cache'); xmlhttp.send(postData); } function requestStateChangeHandler(){ if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) { document.getElementById('results').innerHTML = xmlhttp.responseText; } else dump("Error loading page\n"); } } 

Answer 1

You can use inline images

server side encode your response in base64

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

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

Answer 2

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

Answer 3

It seems that the easiest way would be to create a local proxy service, which you can access through the GET and URL parameters, and on the rear panel - POST for the source image service, receives the image data back, and passes it back to you. Then you just put the URL of your proxy (with parameters) in the img src attribute.

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

The proxy server on myproxy sends a request to the image servlet, respectively.

Answer 4

Do you need to use Ajax? Why not just add an image to the DOM? When I enter the following code into my debugger in chrome, it adds 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'); 

?