При работе с файлами в TypeScript вы можете столкнуться с необходимостью преобразовать объект Blob в строку в кодировке Base64. Это преобразование обычно требуется, когда вы хотите передать или сохранить данные файла в формате, который можно легко представить в виде текста. В этой статье мы рассмотрим несколько методов достижения такого преобразования в TypeScript, а также приведем практические примеры кода.

Метод 1: использование FileReader API

Один из самых простых способов преобразования Blob в Base64 — использование API FileReader, который предоставляет методы для асинхронного чтения данных файла. Вот пример:

function blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64String = reader.result as string;
      resolve(base64String.split(',')[1]);
    };
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}
// Usage:
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
blobToBase64(blob).then((base64String) => {
  console.log(base64String);
});

Метод 2: использование API выборки и Response.blob()

Если вы работаете с файлами, полученными с сервера или из внешнего источника, вы можете использовать API-интерфейс выборки вместе с методом Response.blob() для преобразования Blob в Base64. Вот пример:

async function fetchBlobAndConvertToBase64(url: string): Promise<string> {
  const response = await fetch(url);
  const blob = await response.blob();
  const base64String = await blobToBase64(blob);
  return base64String;
}
// Usage:
const imageUrl = 'https://example.com/image.jpg';
fetchBlobAndConvertToBase64(imageUrl).then((base64String) => {
  console.log(base64String);
});

Метод 3. Использование Canvas и toDataURL()

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

function canvasToBase64(canvas: HTMLCanvasElement): string {
  return canvas.toDataURL();
}
// Usage:
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, canvas.width, canvas.height);
const base64String = canvasToBase64(canvas);
console.log(base64String);

В этой статье мы рассмотрели несколько методов преобразования объекта Blob TypeScript в Base64. Мы рассмотрели использование API FileReader, API извлечения с помощью Response.blob() и метода toDataURL() холста. В зависимости от вашего конкретного случая использования вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Преобразовав Blob-объекты в Base64, вы можете легко работать с данными файлов в текстовом формате, что обеспечивает беспрепятственную передачу и хранение в веб-приложениях.

Не забудьте оптимизировать свою веб-страницу для SEO, используя соответствующие метатеги, заголовки и описательный контент. Это поможет поисковым системам понять тему вашей статьи и улучшить ее видимость для читателей, которым нужна информация о TypeScript, Blobs, Base64 и обработке файлов в веб-разработке.