Javascript FileReader readAsDataURL创建大型base64映像

我需要将输入图像（blob）转换为base64图像。我知道尺寸将增加约1.37

但是，我注意到，与macOS上的内置base64命令行工具相比，使用firereader.readAsDataUrl时，图像的大小非常大

复制步骤：

下载此免费示例图像，确保单击下载按钮（Downlaod Original 8000x600）。不要使用右键单击“另存为”，因为图像将被压缩

使用JSFIDLE选择上面下载的映像，并检查控制台日志中的base 64的大小。您可以看到大小为11.2mb

现在，如果您在mac上使用base64命令行工具将上述下载的图像转换为base64，并检查其中的文件大小。您将在这里看到base64的大小5.9mb

base64-w 0下载的\u image.jpg>下载的\u image.base64

这是我在代码中用于将输入文件映像转换为base64的函数

async convertToBase64(file) {

  if (file === undefined) {
    throw new Error("File could not be found");
  }

  const fileReader = new FileReader();

  return new Promise((resolve, reject) => {
    fileReader.readAsDataURL(file);

    fileReader.onerror = (error) => {
      reject("Input: File could not be read:" + error);
    };

    fileReader.onloadend = () => {
      resolve(fileReader.result);
    };
  });

}

为什么

filereader.readAsDataURL

会使image base64输出非常大

我怎样才能提高效率

---

如果从

数据：image/png中添加22个字节，则文件阅读器的字节数为5882455，而
base64的字节数为5882433；base64，
，我们还不算太远

但是，对于如何提高效率的问题，请不要在此处使用数据URL。无论别人告诉你你也需要它，那都是谎言（我99%肯定）

相反，您应该始终更愿意直接处理Blob

要显示它，请使用blob URL：


inp.onchange=e=>{
img.src=URL.createObjectURL（inp.files[0]）；
};

@kaido抱歉，我不明白你的意思？我的意思是我没有11.2MB，但有一个长度为5882455的字符串，只包含ASCII安全字符（例如一个5.9MB utf-8文本文件），如何？我可以在控制台窗口11.2mb中看到您更改了什么？您如何看到11.2mb？只输出字符串。@Kaido请查看我发送的屏幕截图，我的问题中显示了它在控制台窗口中显示了11.2mb。“如果你从数据中添加22个字节：image/png；base64，我们就不太远了。”你能解释一下这是什么意思吗，看起来你修改了一些东西使其更接近大小，我想知道是什么。您在我提供的步骤中进行了更改绝对不是，我在这里的意思是，数据URL头的
5882433
from
base64
+22=
5882455
来自FileReader，这是正确的，因为FileReader输出了一个数据URL，而
base64
只输出二进制数据的base64编码版本。不幸的是，我们现在被迫使用base64，无法使用blob。我的主要问题是为什么我看到11.2mb（这是个谎言），但我不会强迫你；-）对于这条消息，我添加了一个脚注，对浏览器中生成的二进制数据的字节大小进行了更好的测试。您处理的不是字节序列，而是JS中的字符串。JS字符串存储16位/字符。因此
5882455个字符*2字节/字符/1024/1024
分配了约11.2MB的内存。如果您检查字符串的
长度
，您将看到“正确”的数字。