javascript - 将 xmlhttprequest 中的 jpg 数据放入标签中

Question

这是我的代码的一部分

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

这似乎不起作用。我也试过

document.imglive.src= xmlhttp.responseText;

两者都不起作用

我在这里检查了一些被问到的问题，但没有一个答案可以帮助解决这个问题。

Answer 1

对这些事情使用 base64。在现代浏览器中，有这个本btoa机功能可以帮助您：

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

对于其他浏览器，有简单的模拟实现，只需查看它们即可。

PS：不要污染document对象，使用单独的变量或命名空间。

Answer 2

如果您对 IE10+ 感到满意，您可以xhr.responseType = 'blob'结合使用window.URL.createObjectURL()（以获得获得正确 mime 类型的免费支持）。

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