Home / Questions / 8334
Accepted
devconcept
Asked: 2020-04-23 10:11:32 +0800 CST 2020-04-23 10:11:32 +0800 CST

为什么base64编码图像的大小与原始图像不同？

  • 772

我正在使用 javascript 文件 API 使用readAsDataURL方法读取图像，发现我的图像总是比它们的原始图像大，在一种情况下甚至大 1MB。

这是我正在使用的代码

$(function() {
  'use strict';
  $('#source').on('change', function(evt) {

    var reader = new FileReader();

    var file = evt.target.files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      $('#encoded').text('El tamaño codificado es ' + reader.result.length / 1024 + ' kb')
    }

    if (file) {
      $('#original').text('El tamaño original es ' + file.size / 1024 + ' kb')
      reader.readAsDataURL(file);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="source" type="file">
<div id="original"></div>
<div id="encoded"></div>

我不知道我是否在这里遗漏了什么，或者这种行为是否有某种原因。有谁知道可能是什么原因？

javascript

3 Answers

  1. Best Answer

    Base64 是二进制内容的可打印字符表示。为了可打印，Base64 使用 64 个字符的字母表，每个字符 6 位。

    出现“浪费”是因为 Base64 以字节存储/传输（与其他所有内容一样），因此对于您以 Base64 表示形式存储的每个字节，您需要 1 字节 + 下一个存储字节的 2 位..磁盘、网络、内存等。

    一张图说了一千多个字：

     byte    | base 64
-------- + ---------------------------
 1 byte  | 1 byte + 2 bits.
 2 byte  | 2 byte + 4 bits.
 3 byte  | 3 byte + 6 bits = 4 bytes (recuerda, solo 6 bits)

    也就是说，将原始文件的每个 3 字节块转换为 Base64 格式的 4 字节，这样至少大小会增加 4/3 的比例，即 133%。为此，您必须添加填充（文件大小并不总是 3 的倍数）和在传输文件中找到的回车符。

    • 13

  2. 我刚刚尝试了以下尺寸的图像：

    • 大小：16.8KB（17,276 字节）
    • 磁盘大小：20.0KB（20,480 字节）。

    使用您的示例，我得到：

    • 原始大小为 16.87109375 kb。
    • 编码大小为 22.517578125 kb。

    我们去圣英文维基百科https://en.wikipedia.org/wiki/Base64

    因此，符合 MIME 的 Base64 编码二进制数据的实际长度通常约为原始数据长度的 137%，尽管对于非常短的消息，由于标头的开销，开销可能要高得多。

    在西班牙语中的圣维基百科https://es.wikipedia.org/wiki/Base64

    MIME 没有为 base64 编码的行指定固定大小，但它确实要求最大大小为 76 个字符。此外，它指定解码器应忽略任何非字母字符，尽管许多实现使用 CR/LF（回车和换行）字符来分隔编码行。因此，MIME 编码数据的实际大小通常是原始大小的 140%。

    无论是 137% 还是 140%，使用 Base64 时大小都会增加。干杯!

    • 5

  3. FileReader 将图像转换为 base64 文本字符串：

    data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JF...

    而您的变量是包含二进制file图像的类型对象。File

    有关该对象的更多信息，File您可以阅读此文档

    • 4