ExifをJSON形式で取得できるAPI IMG2JSON で遊んでみる

Exifを取得できる簡単なAPIがないか探していたら、IMG2JSONというちょうどいい感じのAPIがあったので、簡単なサンプルと共に紹介します。JavaScript からもJSONPを使って、呼び出せるのでブログなどでちょこっと仕掛けを入れる際も使えそう。

API仕様

パラメータ url に、EXIFを取得する画像のURLを指定すると、JSON形式でレスポンスされます。パラメータ callback を指定することで、JSONP にも対応しているので、JavaScriptからも呼び出せます。

http://img2json.appspot.com/go/?url=URL (GET)
http://img2json.appspot.com/go/?url=URL&callback=コールバック関数名 (GET)

レスポンス例

こんな感じで、JSON形式でレスポンスが返ってきます。

{
    "url": "http://www.exif.org/samples/fujifilm-mx1700.jpg",
    "mimeType": "image/jpeg",
    "width": 640,
    "height": 480,
    "byteSize": 100227,
    "exif": {
        "YResolution": "72/1", 
        "Tag0xa217": "2", 
        "ResolutionUnit": "Inch",
        "Compression": "6",
        "Copyright": "",
        "Tag0xa300": "[ 3 ]", 
        "Make": "FUJIFILM", 
        "Flash": "no", 
        "DateTime": "2000:09:02 14:30:10", 
        "MaxApertureValue": "3.3", 
        "YCbCrPositioning": "2", 
        ...
    }
}

実際のレスポンスを確認する

サンプル（JavaScript）

以下は、ページに表示されている写真を撮影したカメラ、F/S値を自動挿入するJavaScript（jQuery）のサンプルです。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.photo').each(function() {
        var $this = $(this);
        $.getJSON('http://img2json.appspot.com/go/?url='+encodeURI($this.attr('src'))+'&callback=?', {}, function(json) {
            if (json.exif) {
                $this.after($('<p>').text(
                    json.exif.Model
                    + ' (F' + json.exif.FNumber
                    + ', ' + json.exif.ShutterSpeedValue
                    + ')'
                ));
            }
        })
    });
});
</script>
</head>
<body>
<div>
 <img class="photo" src="http://www.exif.org/samples/canon-ixus.jpg">
</div>
</body>
</html>

こんな感じで.photoクラスが設定されたimgタグのExif情報が表示されます。ブログとかでは、サムネイル化してしまうと、Exif情報が消えてしまう場合があるので、必ずしも表示されるかはわかりませんよ。

まとめ

Exifを取得できるAPIですが、他にもExif JSONサービスってのもありました。こちらは、ドキュメントが日本語なのでむしろわかりやすいかな ...。まぁパラメータなどの仕様はまったく同じなので、使いやすい方を選んでください。

2013/02/28