В этой статье блога мы рассмотрим несколько методов преобразования изображения в Base64 в приложении Angular. Кодирование Base64 — это распространенный метод, используемый для представления двоичных данных, таких как изображения, в текстовом формате. Преобразуя изображения в Base64, мы можем легко встраивать их в HTML, CSS или JavaScript, делая их переносимыми и простыми в работе.

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

// HTML
<input type="file" (change)="handleFileInput($event)">
// TypeScript
handleFileInput(event: any): void {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const base64Image = reader.result as string;
    // Use the base64Image as needed
  };
  reader.readAsDataURL(file);
}

Метод 2. Использование HTML Canvas

// TypeScript
convertImageToBase64(imageUrl: string): Promise<string> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const base64Image = canvas.toDataURL('image/jpeg');
      resolve(base64Image);
    };
    img.onerror = reject;
    img.src = imageUrl;
  });
}
// Usage
const imageUrl = 'https://example.com/image.jpg';
this.convertImageToBase64(imageUrl).then((base64Image: string) => {
  // Use the base64Image as needed
});

Метод 3: использование библиотеки ngx-image-compress

npm install ngx-image-compress

// TypeScript
import { NgxImageCompressService } from 'ngx-image-compress';
constructor(private imageCompress: NgxImageCompressService) {}
compressImage(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    this.imageCompress.compressFile(file, -1, 50, 50).then(result => {
      const base64Image = result.split(',')[1];
      resolve(base64Image);
    }).catch(error => reject(error));
  });
}
// Usage
handleFileInput(event: any): void {
  const file = event.target.files[0];
  this.compressImage(file).then((base64Image: string) => {
    // Use the base64Image as needed
  });
}

В этой статье мы рассмотрели три различных метода преобразования изображения в Base64 в приложении Angular. Первый метод использовал API FileReader, второй метод использовал HTML Canvas, а третий метод использовал библиотеку ngx-image-compress. Каждый метод имеет свои преимущества и может использоваться в зависимости от конкретных требований. Преобразуя изображения в Base64, мы можем повысить переносимость и простоту использования при работе с изображениями в приложении Angular.