CODEWITHSUNDEEP
javascriptxmlhttprequestjpeghttpresponsebinary-data
Gobliins
Gobliins

Reputation: 4026

put jpg data from xmlhttprequest into <img /> tag

here is some part of my code

xmlhttp.open("GET", theUrl, true);
document.imglive.innerHTML = '<img src="data:image/jpeg,' + xmlhttp.responseText + '"/>';

that don´t seem to work. i also tried

document.imglive.src= xmlhttp.responseText;

that neither worked

I checked some of the asked questions here but none of the answers where helping at this porblem.

Upvotes: 2

Views: 5007

Answers (2)

Ajax
Ajax

Reputation: 2520

If you are happy with IE10+, you can use xhr.responseType = 'blob' in conjunction with window.URL.createObjectURL() (to get free support for getting the correct mime type).

xhr.responseType = 'blob';
xhr.onload = function(response) {
  var url = window.URL.createObjectURL(response);
  document.imglive.src = url; // from your example code
}
xhr.open("GET", theUrl, true);

Upvotes: 2

MaxArt
MaxArt

Reputation: 22617

Use base64 for these things. In modern browsers there's this btoa native function that may help you:

document.imglive.innerHTML = "<img src='data:image/jpeg;base64," + btoa(xmlhttp.responseText) + "'/>";

For other browsers there are simple emulated implementations, just check them out.

P.S.: don't pollute the document object, use a separate variable or a namespace.

Upvotes: 3

Related Questions