Exif-Tags auslesen mit JavaScript

Wenn ich mir anderer Leute Fotos anschaue interessiert mich oft, mit welcher Kamera und welchen Einstellungen sie geschossen wurden. Auf Flickr werden diese Informationen neben den Fotos eingeblendet - ansonsten sieht das im Web aber eher mau aus. Daher habe ich mal nachgeschaut was es so für Wordpress-Plugins zum Auslesen von Exif-Daten gibt. Die basieren aber alle auf dem Auslesen beim Bild-Upload und das ist irgendwie nicht schön. Ich hätte das gerne dynamisch im Browser nachdem die Bilder bereits geladen wurden.

Es gibt auf Github eine JavaScript-Bibliothek, die EXIF-Tags auslesen kann. Leider ohne die Daten direkt in die Seite einzufügen. Also habe ich das Projekt geforkt und etwas darum gebastelt, das automatisch Overlays mit den wichtigsten Exif-Daten zu den Bildern hinzufügt sobald sie geladen sind. Beim Hovern erscheint dann der Text. Mittlerweile habe ich auch noch ein paar Bugs in der Originalbibliothek gefixt und die Ladezeit optimiert. Funktionieren tut es jetzt mit Safari, Mobile Safari, Chrome, Firefox und ein bisschen mit dem Internet Explorer. Letzterer verhält sich leider doch wieder arg anders als alle anderen Browser und braucht eine Extrabehandlung. Ursprünglich machte die Originalbibliothek sogar gruselige VBScript-Injection, um das irgendwie in Gang zu bringen. Diese konnte ich zum Glück wieder entfernen. Beim 10er in einer VM ging es bei mir schlussendlich - mit dem 11er wohl schon wieder nicht. Es ist mir jetzt aber auch zu doof, dafür weiter rumzufummeln. Dafür lernte ich, wie einfach man eine Internet Explorer VM auf dem Mac aufsetzen kann. Es muss lediglich VirtualBox installiert werden und anschließend reicht ein einziger Shell-Aufruf, um eine Image herunterzuladen und zu installieren.

Die Skripte sind bei mir auf dem Blog eingebunden und ergänzen alle Fotos um die Exif-Informationen. Dafür muss man an der Seite keine Änderungen vornehmen sondern lediglich diese Dateien in den Header einbinden:

Hier ein Beispielbild wie wir gerade steil Richtung Urlaub düsen:

IMG_0752