如何将响应中的二进制图像解析为base64字符串？

我想将 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 返回“字符串包含无效字符” https://stackoverflow.com/questions/9786508/javascript-atob-returning-string-contains-an-invalid-character

出现该问题的原因是newlines in the response这就是为什么window.btoa()失败的。 当然，任何二进制图像格式都会有换行符...但是从上面的链接来看，建议是删除/替换这些字符 - 对我来说这是一个坏建议，因为如果要从二进制图像中删除/替换某些字符，它就会是已损坏。

当然，可能的替代方案与 API 设计有关： - 添加一些返回 base64 表示的函数 - 添加一些函数，返回图像的 url

如果我不修复它，我将从服务器返回 base64 表示，但我不喜欢这种方式。

是否存在某种方法可以解决我处理响应中的二进制图像的问题，如上面的屏幕截图部分所示，不是吗？

我认为你遇到的部分问题是jQuery.ajax does not https://github.com/jquery/jquery/pull/1525原生支持 XHR2 blob/arraybuffer 类型，可以很好地处理二进制数据（请参阅使用 jQuery.ajax 读取二进制文件 http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/).

如果您使用本机 XHR 对象xhr.responseType = 'arraybuffer'，然后读取响应数组并将其转换为 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/ https://jsfiddle.net/oy1pk8r3/2/

生成 base64 编码的控制台输出：/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....