HTML/Javascript-Zugriff auf EXIF-Daten vor dem Datei-Upload

Ich versuche zu extrahieren EXIF Daten aus einem Bild (jpeg), das in den Browser gezogen oder über ein HTML-Datei-Eingabeelement ausgewählt wurde.

Ich habe es geschafft, das Bild im Browser mit in der Vorschau anzuzeigen FileReader and FileReader.readAsDataURL
wie beschrieben Hier.

und ich fand a EXIF-Bibliothek die es ermöglicht, die EXIF-Daten eines Bildes über Javascript zu extrahieren. Aber bei mir funktioniert es nur, wenn ich es mit normalem nutze img Tags, die ihren Inhalt über eine URL laden.

Ich habe diese Frage auch auf StackOverflow gefunden, wo die akzeptierte Antwort besagt, dass dies einfach nicht möglich ist.

Aber ich bin mir ziemlich sicher, dass es realisierbar ist, denn 500px.com extrahiert die EXIF-Daten unmittelbar nach dem Hinzufügen einer Datei zum Hochladen und bevor der Upload abgeschlossen ist.

Einige Ideen, wie es möglich sein sollte, die EXIF-Daten aus dem base64-codierten Bild zu extrahieren, das ich vom FileReader bekomme?

Endlich habe ich eine clientseitige Lösung für das Problem gefunden:

1. Lesen Sie die Datei mit dem FileReader und die Methode .readAsBinaryString
2. Wickeln Sie dann diese Binärzeichenfolge in ein BinaryFile-Objekt ein, das bereits in der Datei enthalten ist EXIF-Bibliothek
3. Endlich anrufen EXIF.readFromBinaryFile(binaryFileObject);

und fertig 🙂

jQuery-DateiExif Javascript-Bibliothek liest Bild-Exif-Daten vor dem Hochladen.
GitHub-Link, Beispiel jsfiddle aus der Bibliothek.

var someCallback = function(exifObject) {

    $('#cameraModel').val(exifObject.Model);
    $('#lat').val(exifObject.GPSLatitude);
    $('#lng').val(exifObject.GPSLongitude);
    // Uncomment the line below to examine the
    // EXIF object in console to read other values
    //console.log(exifObject);

  }

      try {
        $('#file').change(function() {
            $(this).fileExif(someCallback);
        });
      }
      catch (e) {
        alert(e);
      }

Schauen Sie sich den Code des an FxIF Firefox-Erweiterung. Es liest Exif-Daten nur mit JavaScript. Um den Dateiinhalt zu lesen, können Sie die FileReader-API moderner Browser.