Отличие, конвертация и сценарии использования base64, blob, file и других форматов картинок

1. Разница

Base64: Base64 — это текстовая кодировка, используемая для представления двоичных данных. Он преобразует двоичные данные в строку, состоящую из прописных и строчных букв, цифр и специальных символов. Это удобно для использования в случаях, когда не поддерживается передача или хранение двоичных данных, таких как JSON, HTML и т. д.

Blob: это объект, представляющий большой объем двоичных данных, обычно используемый для обработки изображений, аудио, видео и других файлов. Объект Blob в браузере может генерировать временный URL-адрес для ссылки другими API-интерфейсами с помощью метода URL.createObjectURL.

Файл: объект File наследуется от объекта Blob и используется для представления файла, выбранного пользователем или полученного из сети. Он содержит метаданные, такие как имя, тип и время модификации файла, и может передаваться в качестве параметров другим веб-API для обработки.

2. Взаимное преобразование

(1) Преобразование base64 в объект blob:

function base64ToBlob(data) {
    
    
    var arr = data.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
 
    while (n--) {
    
    
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
    
     type: mime });
}

(2) Преобразование base64 в файловый объект:

// 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
export function dataURLtoFile (dataurl, filename) {
    
    
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/u)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n)
  }
  const blob = new Blob([u8arr], {
    
     type: mime })
  return new File([blob], filename, {
    
     type: mime, lastModified: new Date() })
}

(3) Преобразование большого двоичного объекта в base64

function blobToBase64(blob, callback) {
    
    
  var reader = new FileReader();
  reader.onload = function() {
    
    
    var dataUrl = reader.result;
    var base64 = dataUrl.split(',')[1];
    callback(base64);
  };
  reader.readAsDataURL(blob);
}

(4) большой двоичный объект в файл

function blobToFile(blob, fileName){
    
    
   var b = blob;
   b.lastModifiedDate = new Date();
   b.name = fileName;
   return new File([b], fileName); // 使用File构造函数创建一个新文件对象
}

(5) файл преобразован в base64

fileToBase64 = (file) => {
    
    
  const fileReader = new FileReader();
  fileReader.readAsDataURL(file);
  fileReader.onload = function () {
    
    
    return reader.result;
  };
};