web-dev-qa-db-ja.com

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

ブラウザにドラッグされた、または持っている画像（jpeg）から[〜＃〜] exif [〜＃〜]データを抽出しようとしていますhtmlファイルの入力要素を介して選択されました。

説明されているように、FileReader and FileReader.readAsDataURLを使用してブラウザ内で画像をプレビューすることができました ここ 。

そして私は EXIFライブラリ を見つけました。これはjavascriptを介して画像のEXIFデータを抽出することを可能にします。しかし、私にとっては、URLを介してコンテンツをロードする通常のimgタグで使用した場合にのみ機能します。

また、StackOverflowで この質問 が見つかりました。受け入れられた回答では、それは不可能であると述べられています。

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

FileReaderから取得したbase64でエンコードされた画像からEXIFデータを抽出する方法についていくつかのアイデアがありますか？

javascriptjqueryhtmlfile-uploadexif
14
alex

私はついに問題のクライアント側の解決策を見つけました：

  1. FileReaderとメソッド_.readAsBinaryString_を使用してファイルを読み取ります
  2. 次に、そのバイナリ文字列を、 EXIFライブラリ にすでに含まれているBinaryFileオブジェクトにラップします。
  3. 最後にEXIF.readFromBinaryFile(binaryFileObject);を呼び出します

そしてその完了:)

15
alex

jQuery-fileExifjavascriptライブラリはアップロード前に画像exifデータを読み取ります。
GitHubリンク 、例 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);
      }
4
Nasser Al-Wohaibi

FxIF firefox拡張機能 のコードを見てください。 JavaScriptのみを使用してexifデータを読み取ります。ファイルの内容を読み取るには、最新のブラウザの FileReader API を使用できます。

3
ThiefMaster