HTML/Javascriptファイルアップロード前のEXIFデータにアクセス

Question

ブラウザにドラッグされたか、htmlファイル入力要素で選択された画像（jpeg）からEXIFデータを抽出しようとしています。

ブラウザ内の画像をFileReader and FileReader.readAsDataURL （here）とプレビューすることができました。

と私はEXIF libraryを見つけたので、javascriptで画像のEXIFデータを抽出することができます。しかし、私の場合は、通常のタグでURLを使ってコンテンツを読み込んだ場合にのみ動作します。

私もStackOverflowにthis questionが見つかりました。ここで受け入れられた答えは、それはちょうど不可能であると述べています。

500px.comは、ファイルがアップロードのために追加された直後で、アップロードが完了する前にEXIFデータを抽出するので、実現できると確信しています。

FileReaderから取得したbase64でエンコードされたイメージからEXIFデータを抽出する方法をいくつか考えてみましょうか？

Answer 1

私は最終的に問題のために、クライアント側の解決策を見つけた：

1. FileReaderを使用してファイルおよび方法.readAsBinaryString
2. を読む次に、既にEXIF Libraryに含まれているBinaryFileオブジェクトにそのバイナリ文字列をラップ
3. は最後にEXIF.readFromBinaryFile(binaryFileObject);

を呼び出し、その行わ:)

Answer 2

FxIF firefox extensionのコードをご覧ください。 JavaScriptのみを使用してexifデータを読み込みます。ファイルの内容を読むには、最新のブラウザのFileReader APIを使用できます。

Answer 3

jQuery-fileExifアップロード前に画像のexifデータを読み込みます。
GitHub link、ライブラリーの例jsfiddle。

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); 
     }