处理来自 XMLHttpRequest 的图像（使用 HTML 和 Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3721764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling images from XMLHttpRequest (with HTML and Javascript)
提问by Toymakerii
I am using an XMLHttpRequest to fetch an image from a server (run locally from a third party server-applet)
我正在使用 XMLHttpRequest 从服务器获取图像（从第三方服务器小程序本地运行）
A simplifiedversion of the code is shown below.
甲简化的代码版本如下所示。
The image is returned as a JPEG and the returned header shows "content-type= image/jpg". I can view the information via Firebug for Firefox.
图像以 JPEG 格式返回，返回的标题显示“content-type= image/jpg”。我可以通过 Firebug for Firefox 查看信息。
However I am having a terrible time being able to show the actual image on a webpage because it is the image data being returned from the server NOT a uri to the image location.
但是，我很难在网页上显示实际图像，因为它是从服务器返回的图像数据，而不是图像位置的 uri。
What is the proper way to display this image from the returned data? Should I be using a <span>tag or an <img>tag or a <magical-show-image-from-data>tag?
从返回的数据中显示此图像的正确方法是什么？我应该使用<span>标签还是<img>标签或<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");
}
}
回答by jcubic
You can use inline images
您可以使用内嵌图像
on server side encode your response in base64
在服务器端以 base64 编码您的响应
in php use base64_encode("your data")
and in javascript
在 phpbase64_encode("your data")
和 javascript 中使用
result = document.getElementById('results');
result.innerHTML = '<img src="data:image/gif;base64,' + xmlhttp.responseText + '"/>';
回答by Samuel Zhang
W3C is working on File APIand XMLHttpRequest Level 2to provide a unified experience with Blob for your requirement. You may want to investigate if any existing browser has implemented this feature.
W3C 正在研究File API和XMLHttpRequest Level 2，以根据您的要求提供 Blob 的统一体验。您可能需要调查是否有任何现有浏览器实现了此功能。
回答by LarsH
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.
似乎最简单的方法是设置一个本地代理服务，您可以通过 GET 和 URL 参数访问该服务，并在后端对原始图像服务进行 POST，接收回图像数据，然后通过它还给你。然后，您只需将代理的 URL（带参数）放入 img src 属性中。
<img src="http://myproxy/foo.jpg?param1=bar¶m2=baz" />
The proxy at myproxy POSTs a request to the image servlet accordingly.
myproxy 处的代理相应地向图像 servlet 发送请求。
回答by Robin
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:
你必须使用 Ajax 吗？为什么不直接将图像添加到 DOM 中？当我在 Chrome 中的调试器中键入以下代码时，它会将 PHP 徽标附加到当前页面：
document.body.appendChild(document.createElement('img')).setAttribute('src', 'http://static.php.net/www.php.net/images/php.gif');
?
?
