javascript - put jpg data from xmlhttprequest into <img > tag - Stack Overflow

admin管理员组

文章数量:1022784

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.

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.

• javascript
• xmlhttprequest
• jpeg
• httpresponse
• binary-data

Share Improve this question Follow asked May 21, 2012 at 14:42 GobliinsGobliins 4,0461818 gold badges7171 silver badges130130 bronze badges 8

• what does responseText contain? – Joseph Commented May 21, 2012 at 14:44
• 2 Why aren't you just doing document.imglive.src='/new/src.jpg';? – paulslater19 Commented May 21, 2012 at 14:45
• @Joseph some jpeg data like �����JFIF���������...�*C���NC�]���,O��QE� – Gobliins Commented May 21, 2012 at 14:48
• Aside from the reason, the document.imglive.src = "data:image/jpeg,..." should be in the onreadystatechange-handler. – Andreas Commented May 21, 2012 at 14:49
• @paulslater i am reading also the header data out of the xmlhttpresponse object if i would make a second request the data may have changed. i need header data and content from one request. – Gobliins Commented May 21, 2012 at 14:50

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

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);

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.

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.

• javascript
• xmlhttprequest
• jpeg
• httpresponse
• binary-data

Share Improve this question Follow asked May 21, 2012 at 14:42 GobliinsGobliins 4,0461818 gold badges7171 silver badges130130 bronze badges 8

• what does responseText contain? – Joseph Commented May 21, 2012 at 14:44
• 2 Why aren't you just doing document.imglive.src='/new/src.jpg';? – paulslater19 Commented May 21, 2012 at 14:45
• @Joseph some jpeg data like �����JFIF���������...�*C���NC�]���,O��QE� – Gobliins Commented May 21, 2012 at 14:48
• Aside from the reason, the document.imglive.src = "data:image/jpeg,..." should be in the onreadystatechange-handler. – Andreas Commented May 21, 2012 at 14:49
• @paulslater i am reading also the header data out of the xmlhttpresponse object if i would make a second request the data may have changed. i need header data and content from one request. – Gobliins Commented May 21, 2012 at 14:50

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

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.

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);

本文标签： javascriptput jpg data from xmlhttprequest into ltimg gt tagStack Overflow