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

问题描述

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

I want to parse the requested image from my REST API into base64 string.

首先...我想，这很容易，只需使用 window.btoa() 函数即可.

Firstly... I thought, it would be easy, just to use window.btoa() function for this aim.

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

When I try to do it in such part of my application:

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

我遇到了下一个错误:Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': 要编码的字符串包含 Latin1 范围之外的字符.

正如我在这里读到的:javascript atob 返回 'String contains an invalid字符'

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

The issue occurs because of newlines in the response and that's why window.btoa() failed. Any binary image format of course will have newlines... But as from the link above the suggestion was to remove/replace those characters - is a bad suggestion for me, because if to remove/replace some characters from binary image it just will be corrupted.

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

Of course, the possible alternatives relate to the API design: - to add some function, which return base64 representation - to add some function, which return url to the image

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

If I won't repair it, I shall return base64 representation from the server, but I don't like such a way.

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

Does exist some way to solve my problem with the handling binary image from response, as it's shown above in the part of screenshot, doesn't it?

推荐答案

我认为你遇到的部分问题是 jQuery.ajax 确实 not 原生支持可以很好地处理二进制数据的 XHR2 blob/arraybuffer 类型(参见 使用 jQuery.ajax 读取二进制文件).

I think part of the problem you're hitting is that jQuery.ajax does not natively support XHR2 blob/arraybuffer types which can nicely handle binary data (see Reading binary files using jQuery.ajax).

如果您使用带有 xhr.responseType = 'arraybuffer' 的本机 XHR 对象，然后读取响应数组并将其转换为 Base64，您将得到您想要的.

If you use a native XHR object with xhr.responseType = 'arraybuffer', then read the response array and convert it to Base64, you'll get what you want.

这是一个适合我的解决方案:

Here's a solution that works for me:

// 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.....

Produces base64 encoded console output: /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAIBAQIBAQICAgICAgICAw.....

这篇关于如何将响应中的二进制图像解析为base64字符串?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！