Wie kann ich mit JavaScript die Meta-Daten einer JPG-Datei auslesen?

Um die Meta-Daten einer JPG-Datei mit JavaScript auszulesen, kannst du die Bibliothek `exif-js` verwenden. Diese Bibliothek ermöglicht es dir, EXIF-Daten aus Bilddateien zu extrahieren. Hier ist ein einfaches Beispiel, wie du dies umsetzen kannst:

1. **Bibliothek einbinden**: Zuerst musst du die `exif-js`-Bibliothek in dein Projekt einfügen. Du kannst sie über ein CDN einbinden:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
```

2. **HTML-Elemente erstellen**: Erstelle ein einfaches HTML-Formular, um eine JPG-Datei hochzuladen.

```html
<input type="file" id="fileInput" accept="image/jpeg">
<pre id="output"></pre>
```

3. **JavaScript-Code hinzufügen**: Füge den folgenden JavaScript-Code hinzu, um die Meta-Daten auszulesen und anzuzeigen.

```javascript
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const arrayBuffer = e.target.result;
EXIF.getData(arrayBuffer, function() {
const allMetaData = EXIF.getAllTags(this);
document.getElementById('output').textContent = JSON.stringify(allMetaData, null, 2);
});
};
reader.readAsArrayBuffer(file);
}
});
```

In diesem Beispiel wird beim Hochladen einer JPG-Datei die `FileReader`-API verwendet, um die Datei als ArrayBuffer zu lesen. Anschließend werden die EXIF-Daten mit der `EXIF.getData`-Methode extrahiert und im JSON-Format angezeigt.

Stelle sicher, dass du die `exif-js`-Bibliothek korrekt eingebunden hast und dass dein Browser die benötigten APIs unterstützt.