Как конвертировать изображение в строку Base64 с помощью JavaScript?

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

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Конвертированная версия в формате Base64: " + document.getElementById("imgTest").innerHTML);
        console.log("Конвертированная версия в формате Base64: " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

В этом примере пользователь выбирает файл через элемент <input type="file">, после чего запускается функция encodeImageFileAsURL(). Файл загружается с помощью FileReader, который читает файл как URL с кодировкой Base64. Результат затем отображается как изображение, и конвертированная строка в формате Base64 выводится в виде всплывающего окна и в консоли. Таким образом, вы можете конвертировать не только изображения, но и любые другие файлы, поддерживаемые FileReader.

Вот что я сделал:

// Автор: James Harrington, 2014
function base64(file, callback) {
  var coolFile = {};
  
  function readerOnload(e) {
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile);
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

А вот как вы это используете:

base64($('input[type="file"]'), function(data) {
  console.log(data.base64);
});

Эта функция base64 принимает объект файла из элемента <input> и преобразует его в строку формата Base64. После этого она вызывает обратный вызов callback, передавая ему объект, содержащий информацию о файле (тип, размер, имя) и его кодировку в Base64. Просто передайте элемент input и функцию обратного вызова, чтобы получить доступ к закодированным данным.

Если у вас есть объект файла, вы можете использовать следующую простую функцию для получения его представления в формате Base64:

function getBase64(file, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(file);
}

Пример использования:

getBase64(fileObjectFromInput, function(base64Data) {
    console.log("Base64 файла:", base64Data); // Здесь вы можете добавить свой код, который использует Base64 для своей работы.
});

Эта функция использует объект FileReader для чтения файла из элемента ввода и преобразует его в формат Base64. Как только чтение завершено, результат передается в указанную вами функцию обратного вызова.

Вы можете использовать промисы в JavaScript для работы с файлами и их преобразования в формат Base64. Вот пример функции, которая выполняет эту задачу:

const getBase64 = (file) => new Promise(function (resolve, reject) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject('Ошибка:', error);
});

Эта функция принимает файл, использует FileReader для его чтения и возвращает промис, который разрешается с результатом (данными в формате Base64) или отклоняется в случае ошибки.

Теперь вы можете использовать эту функцию в обработчике событий:

const _changeImg = (e) => {
    const file = e.target.files[0];
    let encoded;
    getBase64(file)
      .then((result) => {
        encoded = result;
        // Здесь можете использовать закодированные данные
      })
      .catch(e => console.log(e));
}

В этом обработчике мы получаем первый файл из загруженных через элемент <input>, а затем вызываем функцию getBase64, чтобы получить его представление в формате Base64. Если операция успешна, можно использовать переменную encoded для дальнейшей обработки. В случае ошибки — просто выводим её в консоль.

Ваша функция uploadProfile предназначена для обработки загрузки файла, получаемого из события (например, события изменения в <input type="file">). Давайте разберём её по шагам:

uploadProfile(e) {
    // Получаем первый файл из выбранных пользователем файлов
    let file = e.target.files[0];
    // Создаем новый объект FileReader
    let reader = new FileReader();

    // Устанавливаем обработчик события onloadend
    reader.onloadend = function() {
        console.log('RESULT', reader.result); // Логируем результат чтения файла
    }
    
    // Читаем файл как Data URL
    reader.readAsDataURL(file);
}

Пояснение:

1. e.target.files[0]: Здесь мы получаем первый файл из списка загруженных пользователем файлов. Это нужно, так как пользователь может выбрать несколько файлов, но в данном случае обрабатываем только первый.

2. FileReader: Это встроенный объект, который позволяет асинхронно читать содержимое файлов (через API Web).

3. onloadend: Функция, которая будет вызвана, когда чтение файла завершено. По завершении мы выводим в консоль результат чтения, который будет представлять собой строку в формате base64 (Data URL).

4. readAsDataURL: Этот метод FileReader начинает чтение указанного файла. По завершении чтения он вызовет обработчик onloadend.

Замечания

Не забудьте добавить обработку ошибок (например, с помощью onerror), чтобы улучшить пользовательский опыт, если произойдет ошибка при чтении файла.