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

Question

我想将我的REST API中请求的图像解析为base64字符串.

首先......我想,这很容易,只是window.btoa()为了这个目的使用功能.

当我尝试在我的应用程序的这一部分中执行此操作时:

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

我有下一个错误:Uncaught InvalidCharacterError:无法在'Window'上执行'btoa':要编码的字符串包含Latin1范围之外的字符.

正如我在这里读到的:javascript atob返回'String包含无效字符'

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

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

如果我不修复它,我将从服务器返回base64表示,但我不喜欢这样的方式.

是否存在一些方法来解决我从处理二进制图像的问题,因为它在屏幕截图中显示,不是吗？

Answer 1

我认为你遇到的部分问题是jQuery.ajax本身不支持XHR2 blob/arraybuffer类型,它们可以很好地处理二进制数据(请参阅使用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/

生成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

Base 64 图像数据对我来说就像

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