处理来自 XMLHttpRequest 的图像（使用 HTML 和 Javascript）答案

【问题标题】：Handling images from XMLHttpRequest (with HTML and Javascript)处理来自 XMLHttpRequest 的图像（使用 HTML 和 Javascript）
【发布时间】：2011-04-12 21:56:44
【问题描述】：

我正在使用 XMLHttpRequest 从服务器获取图像（从第三方服务器小程序本地运行）

代码的简化版如下所示。

图像以 JPEG 格式返回，返回的标头显示“content-type= image/jpg”。我可以通过 Firebug for Firefox 查看信息。

但是，我无法在网页上显示实际图像，因为它是从服务器返回的图像数据，而不是图像位置的 uri。

从返回的数据中显示此图像的正确方法是什么？我应该使用<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");
    }
}

【问题讨论】：

哇。您必须使用data: URI，它在 IE 系列中会有各种限制（在 IE
如果您正在为图像设置正确的标题，并转储原始图像数据，只需使用 src 属性就可以正常工作。文件扩展名并不重要。
将<image> 的src 属性设置为url 也适用于动态内容，但仅适用于GET 请求，不适用于POST :(

标签： javascript html xml image dom

【解决方案1】：

你可以使用内嵌图片

在服务器端将您的响应编码为 base64

在 php 中使用base64_encode("your data")
并在 javascript 中

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

【讨论】：

不幸的是，这种方法不起作用，因为我无法告诉服务器发送 base64 编码的响应。（服务器是第三方罐头产品）
然后使用javascript将其转换为base64 stackoverflow.com/questions/246801/…

【解决方案2】：

W3C 正在开发 File API 和 XMLHttpRequest Level 2，以便根据您的要求提供 Blob 的统一体验。您可能需要调查是否有任何现有浏览器实现了此功能。

【讨论】：

【解决方案3】：

似乎最简单的做法是设置一个本地代理服务，您可以通过 GET 和 URL 参数访问该服务，并在后端对原始图像服务执行 POST，接收返回的图像数据，并将其传回给您。然后，您只需将代理的 URL（带参数）放入 img src 属性中。

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

myproxy 上的代理相应地向图像 servlet 发出请求。

【讨论】：

【解决方案4】：

你必须使用 Ajax 吗？为什么不直接将图像添加到您的 DOM 中？当我在 chromium 中的调试器中键入以下代码时，它会将 PHP 徽标附加到当前页面：

document.body.appendChild(document.createElement('img')).setAttribute('src', 'http://static.php.net/www.php.net/images/php.gif');

【讨论】：

是的，需要 AJAX，我需要使用 XML 查询从服务器动态请求图像以更改请求详细信息
你也可以动态使用这个方法。 XHR 是为基于文本的内容而设计的，看起来服务器正在返回“二进制”内容 (content-type= image/jpg)。在我看来，您正在用圆形钉子攻击方形固定。
这适用于GET 请求，如果服务器仅响应POST 的图像则不起作用。