处理来自 XMLHttpRequest 的图像(使用 HTML 和 Javascript)

Posted

技术标签:

【中文标题】处理来自 XMLHttpRequest 的图像(使用 HTML 和 Javascript)【英文标题】:Handling images from XMLHttpRequest (with HTML and 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 :( 【参考方案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 ***.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 的图像则不起作用。

以上是关于处理来自 XMLHttpRequest 的图像(使用 HTML 和 Javascript)的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Javascript 和 XMLHttpRequest 加载二进制图像数据?

如何使用 Javascript 和 XMLHttpRequest 加载二进制图像数据?

调整图像大小以使大小与指定的纵横比匹配[重复]

使用Scrapy Spiders无需下载即可处理图像

如何处理来自 XMLHttpRequest 的八位字节流

使用 XMLHttpRequest 为 RGB 图像生成主色