Кое-что о base64 в JS

JavaScript

представлять

base64По сути, это метод преобразования кодирования, который преобразуетASCIIПреобразование символов в обычный текст является одним из наиболее распространенных методов кодирования для передачи 8-битных байт-кодов в Интернете.

base64по буквамa-z,A-Z,0-9так же как+а также/, а также в качестве вспомогательного символа=, всего 65 символов составляют базовый набор символов, а все остальные символы могут быть преобразованы в символы набора символов в соответствии с определенными правилами.

abcde => YWJjZGU= ABCDE => QUJDREU=

В ежедневной разработке чаще всегоblobа такжеbase64конвертировать друг друга.

// blob to base64
function blobTobase64(blob) {
    const fileReader = new FileReader()
	let base64 = ''
	fileReader.onload = () => {
  		base64 = fileReader.result // 读取base64
	}
	fileReader.readAsDataURL(blob) // 读取blob
}
// base64 to blob
function dataURItoBlob(dataURI) {
  var mimeString = dataURI
    .split(',')[0]
    .split(':')[1]
    .split(';')[0] // mime类型
  var byteString = atob(dataURI.split(',')[1]) //base64 解码
  var arrayBuffer = new ArrayBuffer(byteString.length) //创建ArrayBuffer
  var intArray = new Uint8Array(arrayBuffer) //创建视图
  for (var i = 0; i < byteString.length; i++) {
    intArray[i] = byteString.charCodeAt(i)
  }
  return new Blob([intArray], { type: mimeString }) // 转成 blob
}

кодировать и декодировать

браузер

Последние браузеры поставляются с двумя методами дляbase64кодирование и декодирование

соответственноatobа такжеbtoa

  • атоб: будетbase64Превратиться в8bitбайт-код
  • бтоа: будет8bitбайт-код вbase64

Для старых браузеров вы можете использоватьjs-base64

Node

В настоящее времяnodeеще не поддерживается вatobа такжеbtoa, но может бытьBufferреализовать,Справочная документация

if (typeof btoa === 'undefined') {
  global.btoa = function (str) {
    return Buffer.from(str).toString('base64');
  };
}

if (typeof atob === 'undefined') {
  global.atob = function (b64Encoded) {
    return Buffer.frome(b64Encoded, 'base64').toString();
  };
}

Метод преобразования

Метод кодирования base64 неприменим к китайскому языку, поскольку китайский язык соответствует нескольким байтам, поэтому его можно использовать первым.encodeURIComponentпосле кодированияbase64кодирование.

исходный код

кодирование

  1. Как группа из трех байтов, каждый байт составляет 8 бит, всего 24 двоичных бита.

    'ABCD'
["ABC", "D"] // 每三字节做一组
['01000001010000100100001', '01000100'] // 转成8bit

  2. 24 двоичных бита каждой группы подразделяются на четыре группы, и каждая группа имеет 6 двоичных битов, что в настоящее время представляет собой двумерный массив.

    [['010000', '010100', '001001', '000011'], ['010001', '00']]
    • Случай двух байтов: преобразуйте 16 двоичных битов этих двух байтов в три группы в соответствии с приведенными выше правилами, тогда последний элемент имеет только 4 бита, затем добавьте два 0 позади, чтобы компенсировать 6 бит, и добавьте символ заполнения в соответствующую позицию на третьем шаге=.
    • Случай одного байта: 8 двоичных битов этого байта преобразуются в две группы в соответствии с приведенными выше правилами, тогда последний элемент имеет только 2 бита, затем сзади добавляются четыре 0, и соответствующая позиция на третьем шаге плюс два символа заполнения=.
    • Проще говоря, сколько битов не хватает, добавьте столько нулей, сколько хотите, пока не достигнете 6 бит.
      [['010000', '010100', '001001', '000011'], ['010001', '000000']]

  3. Добавьте два 00 перед каждой группой, чтобы получить 32 двоичных бита, то есть четыре байта.

В правилах так написано, но я думаю этот шаг можно проигнорировать, т.к.00101010а также101010это то же самое

  1. Преобразуйте каждую группу соответствующего двоичного кода в десятичный, вbase64charНайдите соответствующий символ в наборе символов.

    [["Q", "U", "J", "D"], ["R", "A"]]

    • Каждая группа должна в конечном итоге превратиться в четыре персонажа

    • Если имеется менее четырех символов, это означает, что в открытом тексте менее 3 байтов, поэтому необходимо добавить дополнительные символы.=, составляют четыре символа

    [["Q", "U", "J", "D"], ["R", "A", "=", "="]]

  2. Объедините окончательный результат в строку, которая является окончательным закодированным результатом.

    'ABCD' > 'QUJDRA=='

В соответствии с методом кодирования каждые 3 байта будут закодированы в четыре символа, если меньше 3 байт, будут добавлены символы заполнения=, восполнить несколько недостающих.

btoa('A') // "QQ=="
btoa('AB') // "QUI="
btoa('ABC') // "QUJD"
btoa('ABCD') // "QUJDRA=="

расшифровка

Этап декодирования является обратным этапу кодирования.

  1. Группы по четыре байта каждая.
  2. Добавьте каждую группу символов, кроме пэда=посторонние персонажи вbase64charНайдите индекс в наборе символов.
  3. Преобразовать десятичный индекс в двоичный, если не хватает 6 цифр (оно не должно превышать 6 цифр), то заполнить в начале0.
    1. Если встречается символ пэда=, указывающий, что открытый текст меньше 3 байт, то в соответствии с символом заполнения=, удалить соответствующий номер из последнего элемента группы0
    2. символ заполнения, затем удалите два0
    3. два дополнительных символа, затем удалите четыре0
  4. Объедините двоичные строки в каждой группе.В это время длина строки должна быть кратной 8, а затем разделить каждые 8 ​​бит на байт.
  5. пройти черезString.fromCharCodeПреобразование двоичного кода в символы, затем объединение
  6. Соедините каждый символ, чтобы получить окончательный декодированный результат.

Не по теме - базовая конверсия

  • parseInt(str, radix): преобразовать строку в десятичную по системе счисления.
  • initValue.toString(основание): преобразовать initValue в другое основание
// n进制转十进制
parseInt('1000', 2) // 8
parseInt('1000', 16) // 4096

// 进制间转换
(10).toString(2) // "1010", 10进制转2进制
(0xff).toString(2) // "11111111", 16进制转2进制

Ссылаться на

Оказывается, браузер изначально поддерживает кодировку и декодирование JS Base64.

Примечания Base64

Категории