Преобразование Base64 в файл типа File

JavaScript

предисловие

base64это использование64Способ кодирования произвольных двоичных печатных символов. так называемыйBase64, то есть выбрать64символы - строчные буквыa-z,Заглавная букваA-Z,количество0-9,символ"+","/"(плюс" как слов колодки "=",в реальности65символы) ---- как базовый набор символов. Затем все остальные символы преобразуются в символы этого набора символов.В частности, способ преобразования можно разделить на четыре этапа.

  • Первый шаг — взять каждые три байта как группу, всего24двоичные биты.
  • На втором шаге это24биты разделены на четыре группы, каждая группа имеет6двоичные биты.
  • Третий шаг, добавьте два перед каждой группой00, который расширяется до32двоичные биты, то есть четыре байта.
  • Согласно вышеприведенной таблице, после расширения получается соответствующий символ каждого байта, т.е.Base64закодированное значение.

потому что,Base64преобразует три байта в четыре байта, поэтомуBase64Закодированный текст будет примерно на треть больше исходного текста..

Base64Кодовая таблица только64персонажей, если вы хотите выразить64персонажи, используйте6изbitЕго можно представить полностью (2 в 6-й степени равно 64). потому чтоBase64Кодировка только6индивидуальныйbitмогут быть представлены, в то время как обычные символы представлены с использованием8индивидуальныйbitозначает, что наименьшее общее кратное 8 и 6 равно 24, поэтому 4Base64символ может представлять 3 стандартныхascllперсонаж.

преобразовать строку вbase64Когда строка сначала преобразуется в соответствующийascllкода, а затем перехватить 6 бит слева направо (6 бит соответствуют одномуbase64код), если последний меньше 6 цифр (однаbase64код) заполнить 0, если менее 3 строк символов=(Он будет автоматически удален при декодировании)

из-за=символы могут также появляться вBase64кодирование, но=используется вURL,CookieВнутри будет двусмысленность, поэтому многиеBase64После кодирования знак = будет удален. потому чтоbase64Количество цифр кода всегда кратно 4, поэтому, если при декодировании количество цифр окажется недостаточным, его можно заполнить в конце=.

преобразовать изображение вBase64Метод кодирования заключается в том, что изображение может быть встроено непосредственно в веб-страницу, а не загружено извне, что снижаетHTTPпросить.

Пример: как преобразовать китайский иероглиф «Янь» в кодировку Base64.

Здесь следует отметить, что китайские иероглифы могут иметь несколько кодировок, напримерgb2312,utf-8,gbkи так далее, каждая кодировкаBase64Соответствующие значения разные. Следующий пример начинается сutf-8Например.

Во-первых, «строгий».utf-8закодировано какE4B8A5, записанный в двоичном формате, составляет три байта"11100100 10111000 10100101". положи это24Битовая двоичная строка, преобразуется в общей сложности в четыре группы32двоичное значение бита"00111001 00001011 00100010 00100101", соответствующее десятичное число равно57、11、34、37, они соответствуютBase64значение5、L、i、l.

Поэтому китайский иероглиф «Янь» (utf-8编码)изBase64значение5Lil.

Роднойatobа такжеbtoaметод

отIE10+Браузеры запускаются, все браузеры предоставляют его изначальноBase64Метод кодирования и декодирования можно использовать не только в среде браузера,Service WorkerОкружающая среда также может быть использована.

Имя методаatobа такжеbtoa, конкретный синтаксис выглядит следующим образом:

1. Base64расшифровка

// 浏览器中
var decodedData = window.atob(encodedData);
// 浏览器或js Worker线程中
var decodedData = self.atob(encodedData);

Например

window.atob('RnJ1aXQgQnJv');
// 返回：'Fruit Bro

atobНазвание метода на первый взгляд выглядит странно, и я не знаю, что означает это слово. Мы можем понять это какA to B, то есть изAприбытьB. то есть положитьbase64Преобразовать в строку.

2. Base64кодирование

// 浏览器中
var encodedData = window.btoa(stringToEncode);
// 浏览器或js Worker线程中
var encodedData = self.btoa(stringToEncode);

3. Произвольный файлBase64кодирование

с помощьюFileReaderобъект иreadAsDataURLметод, мы можем преобразовать любой файл вBase64 Data-URI. Предположим, что наш файловый объектfile, то преобразованныйJavaScriptкод показывает, как показано ниже:

var reader = new FileReader();
reader.onload = function(e) {
  // e.target.result就是该文件的完整Base64 Data-URI
};
reader.readAsDataURL(file);

Uint8Array

developer.Mozilla.org/this-cn/docs/…

Uint8ArrayТип массива представляет собой массив 8-битных целых чисел без знака, содержимое которого инициализируется 0 при создании. После создания на элементы массива можно ссылаться как на объекты или с помощью индексации индекса массива.

new Uint8Array(); // ES2017 最新语法
new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
new Uint8Array(typedArray);
new Uint8Array(object);
new Uint8Array(buffer [, byteOffset [, length]]);

charCodeAt

developer.Mozilla.org/this-cn/docs/…

charCodeAt()метод возвращает целое число от 0 до 65535, представляющееUTF-16 кодовая единица.

UTF-16Сопоставление единиц кода может использоватьUTF-16единица кодированияUnicodeкодовая точка. еслиUnicode Кодовая точка не может использовать один UTF-16представление единицы кода (поскольку его значение больше, чем0xFFFF), возвращаемая кодовая единица будет первой кодовой единицей этой суррогатной пары кодовых точек). Если вам нужно значение всей кодовой точки, используйтеcodePointAt().

наконец понял

function dataURLtoFile(dataurl: string, filename: string) {
  // 获取到base64编码
  const arr = dataurl.split(',')
  // 将base64编码转为字符串
  const bstr = window.atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, {
    type: 'image/jpeg',
  })
}

const photoName = `${new Date().getTime()}`
const picContent = dataURLtoFile(
  'data:image/gif;base64,' + pic,
  `${photoName}.jpg`
)

Справочная документация:

stackoverflow.com/questions/3…

stackoverflow.com/questions/1…

GitHub.com/Акира-талант/Фе…

у-у-у-у. palms.com/WordPress/2…

Уууу. Руан Ифэн.com/blog/2008/0…

Категории