В современной веб-разработке существует множество сценариев, в которых может потребоваться преобразовать изображения в строки Base64. Если вы хотите хранить изображения в виде строк в базе данных, передавать их по HTTP или манипулировать ими с помощью JavaScript, преобразование изображений в Base64 предоставляет удобное решение. В этой статье мы рассмотрим несколько методов выполнения этой задачи с использованием TypeScript. Итак, приступим!

Метод 1: использование HTML5 Canvas API
HTML5 Canvas API предоставляет мощный способ манипулирования и преобразования изображений. Мы можем использовать его для преобразования изображения в строку Base64. Вот пример:

const imageToBase64 = (image: HTMLImageElement): string => {
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context?.drawImage(image, 0, 0);
  return canvas.toDataURL('image/png');
};
const img = new Image();
img.src = 'path/to/image.png';
img.onload = () => {
  const base64String = imageToBase64(img);
  console.log(base64String);
};

Метод 2: использование API FileReader
API FileReader позволяет нам асинхронно читать и обрабатывать файлы в JavaScript. Мы можем использовать его для преобразования файла изображения в строку Base64. Вот пример:

const fileToBase64 = (file: File): Promise<string> => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64String = reader.result as string;
      resolve(base64String);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
};
const input = document.getElementById('file-input') as HTMLInputElement;
input.addEventListener('change', async () => {
  const file = input.files?.[0];
  if (file) {
    const base64String = await fileToBase64(file);
    console.log(base64String);
  }
});

Метод 3. Использование модуля файловой системы Node.js (fs).
Если вы работаете с TypeScript в среде Node.js, вы можете использовать встроенный модуль fs для преобразования файла изображения в файл изображения. Строка Base64. Вот пример:

import fs from 'fs';
const fileToBase64 = (filePath: string): string => {
  const fileData = fs.readFileSync(filePath);
  const base64String = fileData.toString('base64');
  return `data:image/png;base64,${base64String}`;
};
const filePath = 'path/to/image.png';
const base64String = fileToBase64(filePath);
console.log(base64String);

В этой статье мы рассмотрели несколько методов преобразования изображений в строки Base64 в TypeScript. Мы рассмотрели использование HTML5 Canvas API, FileReader API и модуля Node.js fs. В зависимости от вашего конкретного варианта использования вы можете выбрать метод, который соответствует вашим потребностям. Теперь у вас есть знания для эффективного преобразования изображений в строки Base64 с помощью TypeScript!