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

Почему размер изображения в кодировке base64 отличается от оригинала?

  • 772

Я использую API файла javascript для чтения изображений с помощью метода readAsDataURL и обнаружил, что мои изображения всегда были больше, чем их оригиналы, в одном случае даже на 1 МБ больше.

Это код, который я использую

$(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-байтовый блок исходного файла преобразуется в 4 байта в формате Base64, так что как минимум размер увеличится в соотношении 4/3, то есть на 133%. К этому вы должны добавить отступы (размеры файлов не всегда будут кратны 3) и возврат каретки, найденные в файле передачи.

    • 13

  2. Я только что попробовал изображение следующих размеров:

    • Размер: 16,8 КБ (17 276 байт)
    • Размер на диске: 20,0 КБ (20 480 байт).

    Используя ваш пример, я получаю:

    • Исходный размер 16.87109375 кб.
    • Закодированный размер составляет 22,517578125 КБ.

    Перейдем к Сан-английской Википедии https://en.wikipedia.org/wiki/Base64 .

    Таким образом, фактическая длина двоичных данных, закодированных в формате Base64, совместимых с MIME, обычно составляет около 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