Hintergrundwissen: Metadaten von Bildern mit Javascript auslesen?

[Linuchs]

Moin,

hängt zusammen mit meiner Frage von gestern.

Im Laufe der Jahre habe ich dutzende von bebilderten Webseiten erstellt und sehe heute die Bilder als automatisch generierte Thumbnails und stelle fest, dass gleiche Bilder in einer und auch in verschiedenen HTML Dateien mehrfach vorkommen und unterschiedliche Bildunterschriften haben.

Nun wäre es hilfreich, den Bild-Dateien einen Titel mitzugeben, der in den Webseiten als Bildunterschrift erscheint.

GIMP bietet an, Metadaten zu bearbeiten: Bild > Metadaten > Metadaten bearbeiten.

Ich exportiere die ergänzte Bilddatei ...

Lese sie zur Kontrolle bei GIMP wieder ein, Titel ist noch da.

lade sie dann bei https://exif-js.pages.dev/ wieder hoch und sehe das:

Der Titel fehlt.

Macht es Sinn sich da weiter reinzuknien oder ist so verwirrend wie die Webseiten, die ich bei der Recherche gelesen habe?

Gruß, Linuchs

[MudGuard]

Hi,

sieht für mich aus als würdest Du hier IPTC-Daten befüllen.

daß das dann bei den Exif-Daten nichtauftaucht, erscheint mir logisch.

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber Linuchs,

ist der von Dir gewählte Weg wirklich der sinnvollste?

Ich frage deshalb, weil Du hier eine technische Möglichkeit nutzen möchtest, die nicht zum klassischen Anwendungsfall gehört. In HTML ist es längst etablierter Standard, dass ein <img>-Element ein src-, ein alt- und ein title-Attribut hat. Man kann mit diesen Metadaten bereits alles das tun, was es braucht. Jetzt käme es nur darauf an, dass diese Metainformationen auch in die HTML-Dokumente kommen und Du wärest für JavaScript bestens gerüstet.

Dein Problem ist doch, dass Du statische HTML-Dokumente hast, in denen die Bildinformationen in Form einer URL fest „verdrahtet“ sind. Was Du jetzt bräuchtest, wäre ein serverseitiger Mechanismus, der die alt- und title-Attribute passend hineinschreibt. Anstatt nun alle Bilddateien zu verändern, sollte es besser eine Liste geben, in der zu jeder Datei die passende Beschreibung und einen passenden Titel gibt. Das kann in einer Textdatei oder in einer Datenbank stehen. Der serverseitige Mechanismus parst das jeweilige HTML-Dokument, findet die <img>-Elemente und (er)setzt diese beiden Attribute passend zum Inhalt des src-Attributs.

Kannst Du einen solchen serverseitigen Mechanismus vor das Ausliefern der HTML-Dokumente setzen?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix Riesterer,

wenn ich mich richtig erinnere, dann ist der Sinn der html-Lösung, das Ganze auch ohne Server zu können.

Aber das Problem beim Auslesen mit JavaScript ist, dass man aus dem Browser heraus keine beliebigen Dateien öffnen kann. D.h. man kann nicht bei jedem Öffnen der Seite die Metadaten on-the-fly aus den Bilddateien auslesen. Das geht nur serverseitig mit PHP - wobei ich die Daten aus Performancegründen dann auch in einer Datei oder eine DB speichern würde.

Um im Browser per JS an die Metadaten zu kommen, müsste man über ein <input type="file"> Element erstmal alle Bilddateien zum Upload anmelden und sie dann, statt sie per Submit an den Server zu senden, per File-API auslesen. Und dann könnte man das Ergebnis im LocalStorage oder der IndexedDB speichern, um diese Übung nicht jedesmal absolvieren zu müssen. Lediglich dann, wenn das Script merkt, dass die HTML-Datei Bilder enthält, zu denen es im LocalStorage keine Metadaten gibt, kann es ein Signal geben, dass ein Update der Metadaten vonnöten ist.

Ob es mit dem File System API einfacher geht, weiß ich nicht - das setzt aber https voraus und da es nur file:/// und nicht files:/// gibt, wird es daran wohl scheitern. Möglicherweise kann man das mit einer PWA lösen, die aus einer HTTPS-Umgebung kommt und lokal installiert wurde, aber (a) ist das Spekulatius meiner seits und (b) denke ich, dass Linuchs diesen Aufwand nicht treiben möchte.

Rolf

[Linuchs]

Lieber Felix,

... ist es längst etablierter Standard, dass ein <img>-Element ein src-, ein alt- und ein title-Attribut hat.

Die Daten sind dabei vom Bild getrennt, also nicht objektorientiert, das ist doch sonst so eine durchgehende Forderung der IT-Branche.

Kameras versehen die Bilddateien mit technischen Daten wie Datum, Blende. GPS-Position usw., weil sie es können. Mindestens ebenso wichtig wäre der Inhalt, etwa die Namen der dargestellten Personen, die beim Kopieren und Versenden des Bildes mitwandern.

Dein Problem ist doch, dass Du statische HTML-Dokumente hast, in denen die Bildinformationen in Form einer URL fest „verdrahtet“ sind.

Korrekt. Und nun brauche ich dasselbe Bild in anderen Dokumenten. Das Bild verrät nicht, wo es aufgerufen wird und wo ich nachschauen könnte, wie es dort beschrieben ist.

Lieben Gruß, Linuchs

[Felix Riesterer]

Lieber Linuchs,

Dein Problem ist doch, dass Du statische HTML-Dokumente hast, in denen die Bildinformationen in Form einer URL fest „verdrahtet“ sind.

Korrekt. Und nun brauche ich dasselbe Bild in anderen Dokumenten. Das Bild verrät nicht, wo es aufgerufen wird und wo ich nachschauen könnte, wie es dort beschrieben ist.

wenn Du aber eine Datei hast, in der steht, welche Bild-URL welche ergänzenden Daten hätte, die sich JavaScript dann zunutze machen könnte, dann hättest Du die Möglichkeit, diese im Dokument zu verwenden.

{
  "/pfad/zum/bild/bild1.jpg": {
    "alt": "Alle Chorsänger auf der Bühne im Trachtenlook während des Publikumapplauses",
    "title": "Gruppenfoto",
    "legal": "mit freundlicher Genehmigung von Blitzi Klicker, dem freundlichen Fotografen"
  },
  "/pfad/zum/bild/logo.jpg": {
    "alt": "Steinadler mit Depeche im Schnabel",
    "title": "Eagle Shreek - You heard us sing!",
    "legal": "Copyright Medienklitsche umn die Ecke"
  }
}

Eine solche JSON-Datei ließe sich mit JavaScript nachladen, um dann anhand der src-Attributes eines Bildes (besser die src-Eigenschaft des Bildobjektes) die passenden Meta-Daten daraus zu verwenden.

Liebe Grüße

Felix Riesterer

[Raketenwilli]

Hm. Wenn das viele Bilder sind, braucht es dann aber ein Verwaltungsprogramm, weil man dann womöglich eine recht ordentlich große Datei manuell bearbeiten muss. → Das ist fehlerträchtig.

Will man das nicht kann man kleinere Dateien ablegen, was im Fehlerfall zu einer einfacheren Korrektur führt. Am einfachsten mit dem Dateiname des Pics, dazu eine weitere Endung (hier '.meta'):

File: "/pfad/zum/bild/bild1.jpg.meta":

{
    "alt": "Alle Chorsänger auf der Bühne im Trachtenlook während des Publikumapplauses",
    "title": "Gruppenfoto",
    "legal": "mit freundlicher Genehmigung von Blitzi Klicker, dem freundlichen Fotografen"
}

Das verschwendet freilich wieder Blöcke auf dem Dateisystem.

Wenn vielleicht sowieso eine Datenbank beteiligt ist würde ich die Daten da hinein kippen, dann ist aber schon wieder ein Verwaltungsprogramm „sehr von Vorteil“.

Aber ich würde in jedem Fall die Daten schon auf dem Server in das HTML einbauen. Mir graut es einfach vor dem zusätzlichen Request. Hier mal ein schnelles, "ausbaufähiges" Beispiel in PHP, welches auch weitere Meta-Daten beachten könnte:

<?php

### Meta-Daten, woher auch immer

$json='{
  "/pfad/zum/bild/bild1.jpg": {
    "alt": "Alle Chorsänger auf der Bühne im Trachtenlook während des Publikumapplauses",
    "title": "Gruppenfoto",
    "legal": "mit freundlicher Genehmigung von Blitzi Klicker, dem freundlichen Fotografen"
  },
  "/pfad/zum/bild/kein-legal.jpg": {
    "alt": "Steinadler mit Depeche im Schnabel",
    "title": "Eagle Shreek - You heard us sing!"
  },
  "/pfad/zum/bild/kein-alt.jpg": {
    "title": "Eagle Shreek - You heard us sing!"
  }
  
}';

$hash = json_decode( $json, true );


### Demo für ein einzelnes Bild. In der Realität per Funktion oder Objekt:

$pic = "/pfad/zum/bild/bild1.jpg";
#$pic = "/pfad/zum/bild/kein-legal.jpg";
#$pic = "/pfad/zum/bild/kein-alt.jpg";

$picMeta = $hash[$pic];

$MetaItemsHTML = [ 'alt', 'title'];
$MetaItems = [ 'legal' ];

foreach ( $MetaItemsHTML as $MetaItem ) {
	if ( isset ( $picMeta[$MetaItem] ) ) { 
		$picMeta[$MetaItem] = ' ' . $MetaItem . "='" . htmlspecialchars( $picMeta[$MetaItem] ) . "'";
	} else {
		$picMeta[$MetaItem] = '';
	}
}

foreach ( $MetaItems as $MetaItem ) {
	if ( isset ( $picMeta[$MetaItem] ) ) { 
		$picMeta[$MetaItem] = "<div class='" . $MetaItem . "'>" . htmlspecialchars( $picMeta[$MetaItem] ) . '</div>';
	} else {
		$picMeta[$MetaItem] = '';
	}
}
?>

### Ausgabe:

<img src='<?=$pic . "'" . $picMeta['alt'] . $picMeta['title'] . '>' . "\n" . $picMeta['legal'] ;?>

[Rolf B]

Hallo Raketenwilli,

Mir graut es einfach vor dem zusätzlichen Request

Das ist ja das Problem mit den .meta Files. Es ist nicht nur ein Request, sondern einer pro Bild. Und das kann sich ansammeln.

Deshalb ist der Einbau ins html sehr sinnvoll. Setzt halt voraus, dass serverseitig etwas passieren kann.

Rolf

[Gunnar Bittersmann]

@@Felix Riesterer

In HTML ist es längst etablierter Standard, dass ein <img>-Element ein src-, ein alt- und ein title-Attribut hat.

Nein.

src und alt – ja. title – nein.

🖖 Live long and prosper

[Raketenwilli]

Nein.

Na gut, kein Standard.

Aber sinnvoll.

• <alt> beinhaltet eine Beschreibung eines Pics
• <title> halt den Titel.

„Missbrauchsmöglichkeiten“:

• <alt> → Suchmaschinenoptimierung (Bildersuche)
• <title> → Auf Geräten mit Mauszeiger eine nette und einfache Möglichkeit, weitere Aussagen aufscheinen zu lassen + Suchmaschinenoptimierung

[Gunnar Bittersmann]

@@Raketenwilli

[title-Attribut] Aber sinnvoll.

Wofür genau?

Ich möchte beim Herumfahren mit der Maus jedes Mal, wenn da ein Bild ist, mit einem aufploppendem Tooltip genervt werden.
— kein Nutzer jemals

Wenn der Bildtitel wichtig ist, gehört er unters Bild – permanent. Wenn er das nicht ist, gehört er auch nicht in ein Tooltip.

---

• <alt> beinhaltet eine Beschreibung eines Pics

Je nach Kontext aber auch was anderes. Bei

<a href="/"><img src="logo" alt="unser schickes Firmenlogo"/></a>

gehört ins alt-Attribut nicht die Beschreibung des Bildes, sondern die des Links:

<a href="/"><img src="logo" alt="Startseite"/></a>

---

• <title> → Auf Geräten mit Mauszeiger eine nette und einfache Möglichkeit, weitere Aussagen aufscheinen zu lassen

Wenn die weiteren Aussagen wichtig sind, müssen sie auch Nicht-Mausschubsern zugänglich sein, also nicht in einem Tooltip versteckt. Wenn sie nicht wichtig sind, warum sollten sie Mausschubsern angezeigt werden?

🖖 Live long and prosper

[Raketenwilli]

Wenn die weiteren Aussagen wichtig sind, müssen sie auch Nicht-Mausschubsern zugänglich sein, also nicht in einem Tooltip versteckt. Wenn sie nicht wichtig sind, warum sollten sie Mausschubsern angezeigt werden?

Nanu? Hab ich doch geschrieben:

„Missbrauchsmöglichkeiten“: Suchmaschinenoptimierung

Ach so. Blumen.

[Linuchs]

Habe weiter recherchiert und was gefunden:

How to Read Image Metadata in JavaScript

Code auf die Schnelle übernommen mit Erfolg:

Eigenes Bild ausgewählt und Tadaaah:

Daten mit Gimp (Bild > Metadaten > Metadaten bearbeiten) ergänzt:

Bild gespeichert und wieder untersucht:

Hmm, doch nicht so einfach. Habe die Datei erneut mit Gimp eingelesen, meine Ergänzung ist enthalten.

Weiß / Ahnt jemand, woran es liegt?

Gruß, Linuchs

Naja, der Code muss wohl ergänzt werden:

<tr>
    <th>Dokumenttitel</th>
    <td id="title">-</td>
</tr>

<tr>
    <th>TITLE</th>
    <td id="title">-</td>
</tr>

<tr>
    <th>Author</th>
    <td id="Author">-</td>
</tr>

sieht dann so aus:

[MudGuard]

Hi,

also wenn ich im Gimp unter Image -> Metadata -> Edit Meta Data einen Titel eingebe, und anschließend unter Image -> Metadata -> View Meta Data nachgucke, ist der Titel nicht in den Exif-Daten, sondern unter XMP zu finden (Xmp.dc.title).

Daß das dann beim Auslesen der Exif-Daten nicht gefunden wird, wundert mich jetzt nicht …

Aber das schrieb ich ja schon vor Tagen …

PS: eine Möglichkeit, die EXIF-Daten zu ändern, habe ich im Plugin-freien GIMP nicht gefunden - außer beim Speichern die EXIF-Daten zu ignorieren.

Evtl. gibt's ja ein Plugin zum EXIF-Editieren?

cu,
Andreas a/k/a MudGuard

[Linuchs]

Hallo Andreas,

ich habe den js-Code von https://codewolfy.com/how-to-read-exif-and-metadata-from-images-using-javascript/ erweitert um

// XMP	Ein flexibles Format, das erweiterte Metadaten wie Autor, Beschreibung und Urheberrechtsinformationen speichert.
// which keynames are available in XMP of imagefiles? duckduckgo Search Assist
XMP.getData(file, function() {
    var title       = XMP.getTag(this, "dc.title");       // 	The title of the image
    var description = XMP.getTag(this, "dc.description"); // 	A description of the image
    var keywords    = XMP.getTag(this, "dc.keywords");
    var creator     = XMP.getTag(this, "dc.creator");     // 	The creator or author of the image
    var rights      = XMP.getTag(this, "dc.rights");      // 		Copyright information for the image

    document.getElementById('title').innerText        = title ? title : "N/A";
    document.getElementById('description').innerText  = description ? description : "N/A";
    document.getElementById('keywords').innerText     = keywords ? keywords : "N/A";
    document.getElementById('creator').innerText      = creator ? creator : "N/A";
    document.getElementById('rights').innerText       = rights ? rights : "N/A";
}); // XMP

bekomme aber nicht die gewünschten Infos

Da die Werte mit einem - Minuszeichen angegeben werden statt N/A bin ich nicht bei den richtigen Keys, die Dokumentation zum Thema ist unklar.

Völlig unklar, unter welchen keys GIMP die eingegebenen Werte abspeichert.

Gruß, Linuchs

[klawischnigg]

Hi there,

Habe weiter recherchiert und was gefunden:

How to Read Image Metadata in JavaScript

Ja, aber ob das Dein Problem lösen wird? Soweit ich das gesehen habe arbeitet das Skript mit der FileReader-Api, und da kannst Du nur Dateien analysieren, die der Anwender mit <input type="file"... zur Verfügung stellt. Was Du damit nicht kannst ist bspw. eine Liste von Bilddateien in einer Schleife abzuarbeiten…