如何將響應中的二進制圖像解析為 base64 字符串？

Question

我想將 REST API 中請求的圖像解析為 base64 字符串。

首先......我認為，這很容易，只需為此目的使用window.btoa()函數。

當我嘗試在我的應用程序的這一部分執行此操作時：

.done( function( response, position ) {
    var texture = new Image();
    texture.src = "data:image/png;base64," + window.btoa( response ); 

我遇到了下一個錯誤：未捕獲的 InvalidCharacterError：無法在 'Window' 上執行 'btoa'：要編碼的字符串包含超出 Latin1 范圍的字符。

正如我在這里讀到的： javascript atob 返回“字符串包含無效字符”

出現此問題是由於newlines in the response的newlines in the response ，這就是window.btoa()失敗的原因。 任何二進制圖像格式當然都會有換行符......但是從上面的鏈接中，建議是刪除/替換這些字符 - 對我來說是一個壞建議，因為如果從二進制圖像中刪除/替換一些字符，它只會是損壞。

當然，可能的替代方案與 API 設計有關： - 添加一些函數，返回 base64 表示 - 添加一些函數，將 url 返回到圖像

如果我不修復它，我將從服務器返回base64表示，但我不喜歡這種方式。

是否存在某種方法來解決我從響應處理二進制圖像的問題，如上面屏幕截圖部分所示，不是嗎？

Answer 1

我認為您遇到的部分問題是jQuery.ajax本身不支持可以很好地處理二進制數據的 XHR2 blob/arraybuffer 類型（請參閱使用 jQuery.ajax 讀取二進制文件）。

如果您使用帶有xhr.responseType = 'arraybuffer'的原生 XHR 對象，然后讀取響應數組並將其轉換為 Base64，您將得到您想要的。

這是一個對我有用的解決方案：

 // http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ function fetchBlob(uri, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', uri, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; if (callback) { callback(blob); } } }; xhr.send(); }; fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { // Array buffer to Base64: var str = btoa(String.fromCharCode.apply(null, new Uint8Array(blob))); console.log(str); // Or: '<img src="data:image/jpeg;base64,' + str + '">' });

https://jsfiddle.net/oy1pk8r3/2/

生成 base64 編碼的控制台輸出： /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

Answer 2

不是使用 _arrayBufferToBase64() 循環遍歷 blob，而是使用 apply() 進行轉換，它在我的瀏覽器中快了 30 倍並且更簡潔

 // http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/ function fetchBlob(uri, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', uri, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; if (callback) { callback(blob); } } }; xhr.send(); }; fetchBlob('https://i.imgur.com/uUGeiSFb.jpg', function(blob) { var str = String.fromCharCode.apply(null, new Uint8Array(blob)); console.log(str); // the base64 data: image is then // '<img src="data:image/jpeg;base64,' + btoa(str) + '" />' });

Answer 3

我猜在將字符串傳遞給函數之前在字符串上使用escape符，如果沒有 API 調用，我無法測試自己。

測試

encodeURI("testñ$☺PNW¢=")

返回

"test%C3%B1$%E2%98%BAPNW%C2%A2="

它只是轉義所有字符，它應該轉義字符串中的所有非法字符

測試

encodeURI("¶!┼Æê‼_ðÄÄ┘Ì+\+,o▬MBc§yþó÷ö")

返回

"%C2%B6!%E2%94%BC%C3%86%C3%AA%E2%80%BC_%C3%B0%C3%84%C3%84%E2%94%98%C3%8C++,o%E2%96%ACMBc%C2%A7y%C3%BE%C3%B3%C3%B7%C3%B6"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

Answer 4

您遇到的問題是響應被視為 Unicode 字符串。 請參閱此處的 Unicode 字符串部分： window.btoa

這篇文章提供了幾種解決方案

Answer 5

長話短說，這看起來像是有人用readAsText（）讀取圖像，該圖像將（“解釋”）二進制文件轉換為utf8而不是utf16。 您需要讓服務器以理想的狀態以arraybuffer或blob格式，甚至以base64返回數據，這些保留二進制文件。

帶摘錄的長版。 （代碼段中的那些問號符號會顯示丟失的信息，請將其與不是utf16中的問號的二進制文件進行比較）： https ://stackoverflow.com/a/56523118/2962797

Answer 6

試試這個，讓它運行良好。 請嘗試一次。 @用戶2402179

  $.ajax({
    type: 'GET',
    url: baseUrl",
    dataType: 'binary',
    xhr() {
      let myXhr = jQuery.ajaxSettings.xhr();
      myXhr.responseType = 'blob';
      return myXhr;
    },
    headers: {'Authorization': 'Bearer '+token}      
    
}).then((response) => {
    // response is a Blob
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.addEventListener('load', () => {
        $('#theDiv').append('<img src="' +reader.result+ '" />')
        resolve(reader.result);
      }, false);
      reader.addEventListener('error', () => {
        reject(reader.error);
      }, false);
      reader.readAsDataURL(response);
    });
  });

Answer 7

Base 64 Image 數據對我有用

<img src="data:image/png;base64,' + responce + '" />