ＪＰＥＧ画像のＵＲＬを与えてＥＸＩＦを読込み
緯度、経度、撮影日時を得る

謝辞：Jacob Seidelin 氏開発の Javascript EXIF Reader 0.1.4 をアカベコ氏が改変したＭＰＬのＪＳライブラリを使わせていただきました。これに関しては、「ＥＸＩＦの概要」をご参照ください。

表示されない場合は、再度クリックしてください。

ソースリスト

●jsライブラリ

<script src="exifjs/binaryajax.js"></script>
<script src="exifjs/exif.js"></script>

●スクリプト

function 画像指定() {
    // ＨＴＭＬから対象となるＪＰＥＧファイルのＵＲＬを受け取る
    var 画像ＵＲＬ = document.form1.画像ＵＲＬ.value;
    緯度経度取得(画像ＵＲＬ);
};     // ↓
       // ↓　呼出し
       // ↓
function 緯度経度取得(画像ＵＲＬ) {
    // Ａ：ＪＰＥＧファイル「sample.jeg」をImageオブジェクト「画像」として定義する
    var 画像 = new Image();      
    画像.src = 画像ＵＲＬ;

    // Ｂ：ライブラリにあるgetAllTags()を呼び出してＥＸＩＦ情報を取得する。
    var ＥＸＩＦ情報 = new Exif(画像);
    ＥＸＩＦ情報.load( function() {
        var タグ値 = ＥＸＩＦ情報.getAllTags();

        // 取得結果は 連想配列　タグ値[タグ名]　に保存される。
        // Ｃ：このタグ名は jsライブラリ で定められている（後述「ＥＸＩＦタグ名」参照）
        var 緯度分秒 = タグ値["GPSLatitude"];  // 緯度・経度は「度,分,秒」の形式になっている
        var 経度分秒 = タグ値["GPSLongitude"];
        var 日時 = タグ値["GPSDateStamp"];
        // Ｄ
        緯度経度加工(緯度分秒, 経度分秒, 日時);      // ★「要改良点」参照
    });   // ↓
};        // ↓ 呼出し
          // ↓
function 緯度経度加工(緯度分秒, 経度分秒, 日時) {
    // Ｅ：度分秒を十進に変換
    var 度分秒 = String(緯度分秒).split(",");
    var 緯度 = 度分秒[0]/1 + 度分秒[1]/60 + 度分秒[2]/3600;
    度分秒 = String(経度分秒).split(",");
    var 経度 = 度分秒[0]/1 + 度分秒[1]/60 + 度分秒[2]/3600;
    // Ｆ：ＨＴＭＬのフォームに出力
    document.form1.緯度出力場所.value = 緯度;
    document.form1.経度出力場所.value = 経度;
    document.form1.日時出力場所.value = 日時;
};

●ＨＴＭＬ

<form name="form1">
    // 入力部　画像ＵＲＬ＝sample.JPG を引数として、関数「画像指定」を呼び出す
    画像ＵＲＬ<input type="text" id="画像ＵＲＬ" value="sample.JPG"></input>
    <input type="button" value="実行" onClick="画像指定()"></input>
    // 出力部　関数「緯度経度加工」より出力される
    緯度<input type="text" id="緯度出力場所"></input>
    経度<input type="text" id="経度出力場所"></input>
    撮影日時<input type="text" id="日時出力場所"></input>
</form>

解説

ここでは、非常に簡単な例として、画像ファイルのＵＲＬを与えて、そのＥＸＩＦ情報を読み、緯度、経度、撮影日時を表示する。

処理の流れ

まえもって、ＪＳライブラリを定義しておく。
ＨＴＭＬから「画像ＵＲＬ」（画像ファイルのＵＲＬ。ここでは sammple.JPG）を設定して、関数「画像指定」を呼び出す。
関数「画像指定」では、単に関数「緯度経度取得」に「画像ＵＲＬ」を渡すだけである→「要改良点」
関数「緯度経度取得」では、Ａで、対象画像を Imageオブジェクトとして定義する。
Ｂの
　　ＥＸＩＦ情報.load( function() {
　　　　var タグ値 = ＥＸＩＦ情報.getAllTags();
　　　　　　：
　　});
がポイントである。この「ＥＸＩＦ情報」や「タグ値」の名称は任意であるが、これにより、ＥＸＩＦの情報が連想配列「タグ値[タグ名]」に取り入れられる。
Ｃでは多様なタグがある→参照「ＥＸＩＦの概要」。もしファイルの変更日時が必要ならば、
　　　　var 変更日時 = タグ値["DateTime"]
とすればよい。
Ｄで、関数「緯度経度加工」を呼び出す。Ｅでは緯度などが度分秒の形式になっているが、GoogleMapなどでは十進数にしたほうが便利なので、それをＥで行う。ここでの
　　　　度分秒 = String(緯度分秒).split(",");
は、緯度分秒を「,」で分離するもので、度分秒[0]は度、度分秒[1]は分、度分秒[2]は秒になる。、
Ｆで、結果をＨＴＭＬに出力する。その後、制御は関数「緯度経度取得」に戻り、さらに関数「画像指定」に戻ってスクリプトは終了する。

要改良点

本来ならば、「緯度」「経度」「日時」の値をメインプログラム「画像指定」で受け取ることにより、多様な処理ができる。それなのに、このプログラムでは、呼ばれた先の関数「緯度経度加工」から結果をＨＴＭＬに出力している。そのため、他の処理につなげるには、出力データを再度入力しなければならない。

本来のようにするには、★行を　return (緯度, 経度, 日時) として「画像指定」に渡せればよいのであるが、どういうわけか受け取れないのである。ご教示頂ければ幸甚である。

ＪＰＥＧ画像のＵＲＬを与えてＥＸＩＦを読込み 緯度、経度、撮影日時を得る

ソースリスト

解説

処理の流れ

要改良点

ＪＰＥＧ画像のＵＲＬを与えてＥＸＩＦを読込み
緯度、経度、撮影日時を得る