如何从响应中解析出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：无法执行＆＃39; btoa＆＃39; on＆＃39; Window＆＃39;：要编码的字符串包含Latin1范围之外的字符。

我在这里阅读：javascript atob returning 'String contains an invalid character'

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

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

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

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

Answer 1

我认为你遇到的部分问题是jQuery.ajax not本身支持XHR2 blob / arraybuffer类型，它们可以很好地处理二进制数据（参见Reading binary files using 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倍，而且更加简洁

＆＃13;

＆＃13;

// 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) + '" />'	
});

＆＃13;

＆＃13;

＆＃13;

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

此post

提供了多种解决方案

Answer 5

尝试正常运行。请尝试一次。 @ user2402179

{{1}}

Answer 6

基础64图像数据像我一样工作

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