将二进制数据转换为 base64 不适用于 btoa unescape

Question

我是 React 新手，想显示下载为二进制数据的图像。我从 api 调用 adobe lightroom api 下载图像数据。 api 调用有效，因为图像在 Postman 中显示没有问题。我也可以将图像数据保存为jpeg文件，它显示正常。

在 React 中，我想做 <img src={`data:image/jpeg;base64,${theImage}`} />，为此我需要将二进制数据转换为 base64 编码的字符串。当我使用 cat image.jpeg|base64 > base64.txt 转换下载的 jpeg 时，生成的字符串在我的 React 应用程序中有效。

但是当我在 React 中尝试 var theImage = btoa(binarydata) 时，我得到 Unhandled Rejection (InvalidCharacterError): Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

搜索问题后，我尝试使用 var theImage = btoa(unescape(encodeURIComponent( binarydata ))) 和类似的建议解决方案，但从中得到的字符串并不是看起来有效的 jpeg base64 编码（我尝试转换的结果在在线 base64-> 图像服务中，没有显示图像）。我还尝试了其他建议的解决方案，例如 base64-js 和 js-base64 库，但没有一个创建有效的 base64 有效图像显示在我的 React 代码中。

当 btoa 抛出 latin1 异常时，如何将 jpeg 二进制数据转换为有效的 Base64 图像编码？

Answer 1

您说过您正在使用 axios.get 从服务器获取图像。您可能会得到返回的内容是 Buffer 或 ArrayBuffer 或 Blob 等，但这取决于您如何处理从 axios 获得的响应。

我不使用 axios（从来没有觉得有必要），但您可以通过 fetch 从服务器轻松获取二进制数据的 data URI:

// 1.
const response = await fetch("/path/to/resource");
// 2.
if (!response.ok) {
    throw new Error("HTTP error " + response.status);
}
// 3.
const buffer = await response.arrayBuffer();
// 4.
const byteArray = new Uint8Array(buffer);
// 5.
const charArray = Array.from(byteArray, byte => String.fromCharCode(byte));
// 6.
const binaryString = charArray.join("");
// 7.
const theImage = btoa(binaryString);

或更简洁：

const response = await fetch("/path/to/resource");
if (!response.ok) {
    throw new Error("HTTP error " + response.status);
}
const buffer = await response.arrayBuffer();
const binaryString = Array.from(new Uint8Array(buffer), byte => String.fromCharCode(byte)).join("");
const theImage = btoa(binaryString);

工作原理如下：

我们请求图像数据。
我们检查请求是否有效（fetch 仅在网络错误而非 HTTP 错误时拒绝其承诺；这些通过 status 和ok道具。
我们将响应正文读入ArrayBuffer；缓冲区将包含二进制图像数据。
我们想将该缓冲区数据转换为 binary string. To do that, we need to access the bytes individually, so we create a Uint8Array（使用该缓冲区）以访问它们。
要将该字节数组转换为二进制字符串，我们需要将每个字节转换为其等效字符，并将它们连接在一起形成一个字符串。让我们通过使用 Array.from 和它的映射函数（为每个字节调用）来做到这一点，我们将使用 String.fromCharCode 将字节转换为字符。（这并不是真正的转换。字节 25 [例如] 变成字符串中字符代码为 25 的字符。）
现在我们通过将数组中的字符连接成一个字符串来创建二进制字符串。
最后，我们将该字符串转换为 Base64。

查看文档，看起来 axios 允许您提供选项 responseType: "arraybuffer" 来获取数组缓冲区。如果我没看错，你可以像这样使用 axios：

const response = await axios.get("/path/to/resource", {responseType: "arraybuffer"});
const binaryString = Array.from(new Uint8Array(response.body), v => String.fromCharCode(v)).join("");
const theImage = btoa(binaryString);

Answer 2

从中获取您的图像 Blob and generate a blob:// URI。

data:// URLs 是完全低效的并且比 blob:// URLs 需要更多的内存 space。 data:// URL 比它代表的实际数据多 space 34%，它必须存储在 DOM + 解码为图像解码器再次读取二进制文件。另一方面，blob:// URI 只是指向内存中二进制数据的指针。

blob:// URLs 并不完美，但在浏览器正确实现 srcDoc 之前，它仍然是我们拥有的最好的。

因此，如果根据您在浏览器中使用 axios 的评论，您可以这样做

const blob = await axios.get("/path/to/resource", {responseType: "blob"});
const theImage = URL.createObjectURL(blob);

如果您想使用 fetch API

const response = await fetch("/path/to/resource");
if (!response.ok) {
    throw new Error("HTTP error " + response.status);
}
const blob = await response.blob();
const theImage = URL.createObjectURL(blob);

Ps:
如果您没有任何特殊原因通过 AJAX 获取此图像（例如凭据或特殊 POST 参数），则直接传递资源的 URL 作为 src 你的图片：

<img src="/path/to/resource" />

将二进制数据转换为 base64 不适用于 btoa unescape

Convert binary data to base64 does not work with btoa unescape

javascript

base64

jpeg

reactjs