处理来自 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¶m2=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 加载二进制图像数据?