在JavaScript中加載並顯示需要基本身份驗證的PNG圖像（不是base64）

Question

我對此深感困惑。 我需要使用JavaScript從需要基本身份驗證的另一台服務器上檢索圖片，例如http：// ip：port / icon_contact.png 。 服務器無法提供base64。 不必擔心x域限制。 在此先感謝，路易斯

Answer 1

如果我正確地閱讀了您的問題（這不確定），那么您想直接（不通過用戶）檢索提供基本身份驗證信息的圖像文件的二進制數據。

您應該能夠使用XMLHttpRequest對象來執行此操作（可以在open調用中提供auth信息），但是要從響應中讀取二進制數據，我很確定您將不得不采用全新的和/或實現方式特定的東西。 這里是MSDN ， MDC和（非常新的） W3C文檔的鏈接。 微軟的XMLHttpRequest有responseBody ，Mozilla的（Firefox）有mozResponseArrayBuffer ，我相信W3C文檔在這里討論了二進制數據。

要顯示通過上述方法加載的圖像，可以將二進制數據轉換為數據URL （更正確地說是“數據URI”，但沒有人說）字符串，並將結果分配給img標簽的src 。 您必須將任何特定於瀏覽器的二進制文件轉換為base64編碼 （用於數據URL）。 （您可能不必自己編寫轉換，快速搜索表明人們已經在解決此問題，您可以重復使用[並可能有助於他們的工作...]

壞消息是IE從IE8開始僅支持數據URI，並將其限制為32k，因此您必須像Google那樣使用精美的切片技術來進行搜索預覽 。

獲得data://字符串后， 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);