當試圖把xmlHTTPRequest的圖像/ png響應時，我得到垃圾數據

我正在使用下面的代碼來調用驗證碼生成Web服務。響應能夠正確讀取，但努力的結果追加一個div下，當圖像顯示爲垃圾文本當試圖把xmlHTTPRequest的圖像/ png響應時，我得到垃圾數據

var xmlHttp = new XMLHttpRequest(); 
 
      xmlHttp.onreadystatechange = function() { 
 
       if (xmlHttp.readyState == 4 && xmlHttp.status == 200) 
 
       { 
 
       window.alert(xmlHttp.getAllResponseHeaders()); 
 
       document.getElementById("captchaDiv2").innerHTML = "<img src=\"data:image/png;base64," + xmlHttp.responseText + "\"/>"; 
 
       } 
 
      } 
 
      xmlHttp.open("GET", captchaSrc, true); // true for asynchronous 
 
      xmlHttp.send(null);

響應報頭下面，你可以看到類型是圖像/ PNG

然而，當我嘗試導入的HTML裏面我得到以下：

您能否提供建議可能是背後的根本原因？我已經嘗試過使用btoa（）和不使用編碼...沒有結果。

來源

2017-03-21 erahal

如何刪除所有JavaScript並把'' –

不能這樣做，因爲我需要解析頭並從它刪除一些信息（驗證碼）進一步驗證。如果有一種方法可以用你建議的方式獲取標題的信息，那麼這將是一個有效的解決方案 – erahal

這個答案使用的信息來自https://stackoverflow.com/a/11562550/266561 - 長話短說：你在XHR中得到的字符串有點難以轉換爲base64，因爲字符串似乎被轉換爲UTF-8，然後它似乎被破壞，base64字符串不再有效。此外，如果您嘗試btoa(xmlHttp.responseText)，則由於非ascii字符而在Chrome中出現錯誤。

但是，有一種解決方案。首先，爲了簡化嵌入新的src，創建一個空的<img id="captchaImg" />元素。然後，

var xmlHttp = new XMLHttpRequest(); 
xmlHttp.responseType = "arraybuffer"; 
xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
    document.getElementById("captchaImg").setAttribute('src', 'data:image/png;base64,' + btoa(String.fromCharCode.apply(null, new Uint8Array(xmlHttp.response)))); 
    } 
} 
xmlHttp.open("GET", captchaSrc, true); // true for asynchronous 
xmlHttp.send(null);

這裏的技巧是xmlHttp.responseType = "arraybuffer"，以確保我們的數據保持安全，而不是亂碼。從兼容性的角度來看，如果我從MDN（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays）正確理解，則對於類型化數組的支持來自IE 10，甚至在舊版Safari 5.1（這是Windows的最新版本）中都支持。

來源

2017-03-21 13:56:13

許多人非常感謝這工作完美無缺：）欣賞它 – erahal

當試圖把xmlHTTPRequest的圖像/ png響應時，我得到垃圾數據

回答

相關問題