如何将响应中的二进制图像解析为 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 + '" />