加载和显示PNG图像（不BASE64）需要在JavaScript中的基本认证 [英] load and display PNG image (Not base64) requiring basic authentication in JavaScript

问题描述

我如此坚持这一点。我需要找回例如一个图片 HTTP：// IP：端口/ icon_contact.png 使用JavaScript从需要基本身份验证的另一台服务器。服务器无法给予的base64。不要担心的X域限制。
提前致谢，
louenas

I'm so stuck on this. I need to retrieve a picture e.g. http://ip:port/icon_contact.png using JavaScript from another server requiring basic authentication. The server can't give base64. Don't worry about x-domain restriction. thanks in advance, louenas

推荐答案

如果我正确＆NBSP阅读您的问题;＆MDASH;这绝不是某些＆NBSP;＆MDASH;要恢复图像文件的二进制数据直接提供基本的身份验证信息（不通过用户）。

If I'm reading your question correctly — which is by no means certain — you want to retrieve the binary data of an image file providing basic authentication information directly (not via the user).

您应该能够做到这一点与 XMLHtt prequest 对象（可以提供在打开调用），而是从响应中读取二进制数据我相当肯定你得偏离到全新的和/或特定实现的东西。这里是链接到 MSDN ，<一个HREF =htt​​ps://developer.mozilla.org/en/xmlhtt$p$pquest相对=nofollow> MDC 和（相当新）的 W3C 文档。微软 XMLHtt prequest 拥有的 responseBody ，Mozilla的（Firefox的）具有 mozResponseArrayBuffer ，和我相信W3C文档讨论二进制数据这里。

You should be able to do this with the XMLHttpRequest object (you can supply auth information in the open call), but to read binary data from the response I'm fairly sure you'll have to stray into brand-new and/or implementation-specific stuff. Here are links to the MSDN, MDC, and (fairly new) W3C docs. Microsoft's XMLHttpRequest has responseBody, Mozilla's (Firefox's) has mozResponseArrayBuffer, and I believe the W3C docs discuss binary data here.

要的显示的形象已经通过上述加载它，你可以转换二进制数据转换的数据网址的（更正确的数据URI，但没有人说）的字符串，并把结果赋给一个 IMG 标记的的src 。你必须转换任何特定的浏览器的二进制东西是进入 base64编码（为数据URL）。的（您可能没有写自己的转换，快速搜索表明，人们一直在解决这个问题，你可以重复使用[和可能有助于回]他们的努力...）的

To display the image having loaded it via the above, you could transform the binary data into a data URL (more correctly "data URI", but no one says that) string and assign the result to an img tag's src. You'd have to convert from whatever the browser-specific binary stuff was into the base64 encoding (for the data URL). (You probably don't have to write the conversion yourself, a quick search indicates that people have been tackling this problem and you can reuse [and possibly contribute back to] their efforts...)

坏消息是，IE浏览器只支持数据URI作为IE8的，而且他们限制为32K，所以你不得不漂亮的切片技术，如的谷歌确实对搜索preVIEW 。

The bad news is that IE only supports data URIs as of IE8, and it limits them to 32k, so you'd have to nifty slicing techniques like Google does for search preview.

一旦你的数据：// 字符串时， IMG 标记部分很简单。如果你不使用的库：

Once you have the data:// string, the img tag part is easy. If you're not using a library:

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);

这篇关于加载和显示PNG图像（不BASE64）需要在JavaScript中的基本认证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！