将二进制数据转换为 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 库，但这些库都没有创建可以在我的 React 代码中显示的有效 base64 有效图像。

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);

这是如何工作的：

1. 我们请求图像数据。
2. 我们检查请求是否有效（fetch 仅在 network 错误时拒绝它的承诺，而不是 HTTP 错误；这些是通过 status 和 ok 属性报告的。
3. 我们将响应正文读入ArrayBuffer；缓冲区将包含二进制图像数据。
4. 我们希望将该缓冲区数据转换为binary string。为此，我们需要单独访问字节，因此我们创建了一个Uint8Array（使用该缓冲区）来访问它们。
5. 要将字节数组转换为二进制字符串，我们需要将每个字节转换为其等效字符，然后将它们连接成一个字符串。让我们通过使用Array.from 来做到这一点，并在其映射函数（为每个字节调用）中，我们将使用String.fromCharCode 将字节转换为字符。 （这并不是真正的转换。字节 25 [例如] 成为字符串中字符代码为 25 的字符。）
6. 现在我们通过将该数组中的字符连接成一个字符串来创建二进制字符串。
7. 最后，我们将该字符串转换为 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 和generate a blob:// URI。

data:// URLs 完全没有效率，并且比 blob:// URLs 需要更多的内存空间。 data:// URL 比它所代表的实际数据多占用 34% 的空间，并且它必须存储在 DOM 中 + 再次解码为二进制文件才能被图像解码器读取。而 blob:// URI 只是一个指向内存中二进制数据的指针。

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

所以如果根据 cmets 你在浏览器中使用 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);

---

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

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