加载并显示需要JavaScript基本身份验证的PNG图像（非base64）

我被这件事缠住了。我需要从另一个需要基本身份验证的服务器检索图片，例如使用JavaScript。服务器无法提供base64。不要担心x域限制。 提前感谢,，

---

louenas

如果我正确地阅读了您的问题（这一点并不确定），那么您希望直接（而不是通过用户）检索提供基本身份验证信息的图像文件的二进制数据

您应该能够使用

XMLHttpRequest

对象来实现这一点（您可以在

open

调用中提供身份验证信息），但要从响应中读取二进制数据，我相当确定您必须进入全新的和/或特定于实现的内容。这里是指向和（相当新的）文档的链接。微软的

XMLHttpRequest

有，Mozilla的（Firefox）有

mozResponseArrayBuffer

，我相信W3C文档讨论的是二进制数据

要显示通过上面加载的图像，您可以将二进制数据转换为字符串（更正确的说法是“数据URI”，但没有人这么说），并将结果分配给

img

标记的

src

。您必须将特定于浏览器的二进制内容转换为（用于数据URL）。（您可能不必自己编写转换，快速搜索表明人们一直在解决这个问题，您可以重用[并可能为]他们的努力做出贡献…）

坏消息是，IE从IE8开始只支持数据URI，并且它将它们限制在32k，因此您必须使用像这样漂亮的切片技术

一旦有了

数据：//

字符串，

img

标记部分就很容易了。如果您没有使用库：

var img, element;

img = document.createElement('img');
img.src = /* ... the data URI ... */
element = /* ... find the element you want to put the image in, via
                 document.getElementById or document.getElementsByTagName
                 or other DOM traversal ... */;
element.appendChild(img);

---

如果我正确地阅读了您的问题（这一点并不确定），那么您希望直接（而不是通过用户）检索提供基本身份验证信息的图像文件的二进制数据

您应该能够使用

XMLHttpRequest

对象来实现这一点（您可以在

open

调用中提供身份验证信息），但要从响应中读取二进制数据，我相当确定您必须进入全新的和/或特定于实现的内容。这里是指向和（相当新的）文档的链接。微软的

XMLHttpRequest

有，Mozilla的（Firefox）有

mozResponseArrayBuffer

，我相信W3C文档讨论的是二进制数据

要显示通过上面加载的图像，您可以将二进制数据转换为字符串（更正确的说法是“数据URI”，但没有人这么说），并将结果分配给

img

标记的

src

。您必须将特定于浏览器的二进制内容转换为（用于数据URL）。（您可能不必自己编写转换，快速搜索表明人们一直在解决这个问题，您可以重用[并可能为]他们的努力做出贡献…）

坏消息是，IE从IE8开始只支持数据URI，并且它将它们限制在32k，因此您必须使用像这样漂亮的切片技术

一旦有了

数据：//

字符串，

img

标记部分就很容易了。如果您没有使用库：

var img, element;

img = document.createElement('img');
img.src = /* ... the data URI ... */
element = /* ... find the element you want to put the image in, via
                 document.getElementById or document.getElementsByTagName
                 or other DOM traversal ... */;
element.appendChild(img);

---

给我们一些细节。。。为什么需要使用javascript来执行此操作？什么是“检索”？您希望用户提示进行身份验证，还是希望提供身份验证？我正在使用JavaScript编写一个本机移动应用程序。所有应用程序的代码都驻留在客户端。我可以使用Ajax获取PNG二进制文件，但我不知道如何在HTML页面上显示它们。然后，我回答的第二部分应该会有所帮助—您希望将二进制数据转换为

数据：//

URL。请提供一些详细信息。。。为什么需要使用javascript来执行此操作？什么是“检索”？您希望用户提示进行身份验证，还是希望提供身份验证？我正在使用JavaScript编写一个本机移动应用程序。所有应用程序的代码都驻留在客户端。我可以使用Ajax获取PNG二进制文件，但我不知道如何在HTML页面上显示它们。然后，我的回答的第二部分应该会有所帮助—您希望将二进制数据转换为

数据：//

URL。这不可行，因为获取图像需要凭据。但是您提供的代码没有使用XmlHTTPRequest。如果我使用XHR，我可以提供凭证，但作为回报，我会得到图标的二进制数据。当我使用与您相同的方法时，我找不到如何设置凭据的方法：（@loueas:请从头重新阅读答案。首先，您使用

XMLHttpRequest

获取数据（我怀疑这会很棘手）。然后你将其转换为

数据：//

URL。然后你将该数据URL与

img

标记一起使用。我没有为你编写所有代码，我指向了我认为你需要编写的信息。代码示例只是拼图的第三部分，很容易划掉。祝你好运。我试过了。我不知道是否成功可以转换图标的二进制数据（使用XHR检索）到一个数据URI。还要记住，IE只支持从版本8开始的数据URI，甚至它将其大小限制为32KB。这无法工作，因为获取图像需要凭据。但是您提供的代码不使用XmlHTTPRequest。如果我使用XHR，我可以提供凭据，但作为回报，我会获得图标的二进制数据。当我使用与您的方法相同，我找不到如何设置凭据的方法：（@loueas:请从头重新阅读答案。首先，您使用

XMLHttpRequest

获取数据（我怀疑这会很棘手）。然后将其转换为

数据：//

URL。然后将该数据URL与

img

标记一起使用。我没有为您编写所有代码，我指向了我认为您需要编写的信息。代码示例仅是第三个