Exif-Daten in Angular Anwendungen anzeigen – Ein ausführliches Tutorial

Exif-Daten sind zusätzliche Informationen, die von Digitalkameras und Smartphones in Fotos gespeichert werden. Diese Daten enthalten Informationen wie die Kamera-Marke und -Modell, die verwendete ISO-Empfindlichkeit, die Belichtungszeit und vieles mehr. In diesem Artikel werden wir uns ansehen, wie man Exif-Daten in einer Angular-Anwendung darstellen kann. Der erste Schritt beim Lesen von Exif-Daten in Angular ist die Installation eines Pakets, das diese Daten extrahieren kann. Eines der am häufigsten verwendeten Pakete dafür ist exif-js. Um es zu installieren, führen Sie einfach den folgenden Befehl in Ihrem Projektverzeichnis aus:

npm install exif-js

Als nächstes können wir eine Komponente erstellen, die die Exif-Daten aus einem hochgeladenen Foto liest. Hier ist ein Beispiel für eine Komponente, die ein file-Eingabefeld verwendet, um das hochgeladene Foto zu lesen und die Exif-Daten dann an die Anzeige zu binden:

import { Component } from '@angular/core';
import * as exif from 'exif-js';

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="onFileChange($event)" />
    <div *ngIf="exifData">
      <p>Make: {{ exifData.Make }}</p>
      <p>Model: {{ exifData.Model }}</p>
      <p>ISO: {{ exifData.ISO }}</p>
      <p>Exposure Time: {{ exifData.ExposureTime }}</p>
    </div>
  `
})
export class AppComponent {
  exifData: any;

  onFileChange(event) {
    const file = event.target.files[0];
    exif.getData(file, function() {
      this.exifData = exif.getAllTags(this);
    });
  }
}

In diesem Beispiel verwenden wir das change-Ereignis auf dem file-Eingabefeld, um das hochgeladene Foto zu lesen und die Exif-Daten zu extrahieren. Wir verwenden dann die ngIf-Direktive, um die Anzeige nur dann anzuzeigen, wenn Exif-Daten vorliegen. Innerhalb der Anzeige binden wir dann die einzelnen Exif-Datenfelder an die entsprechenden Platzhalter.