JSでExif情報を取得する方法

2016年4月14日

はじめに

写真のExifをJavaScriptで扱うライブラリについて検索すると、リンクが切れていたり、使えるのよくわからない情報がたくさんあったので、自分が使えたライブラリについて書いておく。

ライブラリのインストール

ソースを持ってくる場合

https://github.com/exif-js/exif-js

から、exif.jsをダウンロードして使う

bower を使う場合

$ bower install --save exif-js

使い方

<input type="file" id="file">
<script >
var obj1 = document.getElementById("file");

obj1.addEventListener("change", function(evt){
  var file = evt.target.files[0]; // fileオブジェクトの取得
  EXIF.getData(file, function(){
      // コールバック
      // Exif情報の取得
    console.log(file.exifdata);
    // alartでも表示
    alert(JSON.stringify(file.exifdata));

    // たとえば撮影日の取得
    var dt = file.exifdata.DateTime;
    console.log(dt);
  });
},false);

</script>

手順は、

  • EXIF.getDataメソッドに、HTML5のfileオブジェクトを渡す。
  • EXIF.getDataメソッドの第2引数にコールバック関数を指定する。
  • コールバック関数が呼ばれると、fileオブジェクトのexifdataプロパティにexif情報が追加されている。

EXIFは結構いろんな情報が取得できるので便利。
以前にPHPでサーバサイド側で似たようなライブラリを使用したことがあるけれど、クライアントからアップロード→サーバでEXIFを解析→クライアントに表示みたいな手順で、面倒だった。
ブラウザで完結できるなら、そのほうが楽だよね。