[javaScript]JPEGからEXIF情報を取得

JPEGからEXIF情報を取得したく調べました。

機能概要

• JPEGからEXIF情報を取得
• Google Map上に、緯度経度をセンタリング
  ※EXIFの緯度経度は度分秒で表現されているが、Google Map は度のみのため、dms2deg()で変換する。

ひとまず実装したので、細かいところは、今後修正します。

HTML Source:

<script type="text/javascript" src="http://www.google.com/jsapi?key=yourkey"></script>

"yourkey"は各自取得して設定してください

JS Source

(function(d){

var gmap = {};

google.load('maps', '2');

google.setOnLoadCallback(function(){
    gmap.map = new google.maps.Map2(d.getElementById('gmap'));
    gmap.map.addControl(new GSmallMapControl());
    gmap.map.addControl(new GMapTypeControl());
    gmap.geocoder = new google.maps.ClientGeocoder();
});

window.onunload=function(ev){  GUnload() }

var dms2deg = function(src){
  var deg = 0; /* 45 deg 26' 1.80" N */
  src.replace(/(\d+)\D*(\d+)\D*(\d+\.\d+)\D*([NSEW])/, function(a,d,m,s,nsew){
    deg = parseInt(d,10) + parseInt(m,10)/60 + parseFloat(s)/3600;
    deg *= nsew === 'N' ? 1 : nsew === 'E' ? 1 : -1;
  });
  return deg;
};

JSONP = {
  get:function(uri, cb){
    if (!cb) cb = 'JSONP.run';
    d.getElementById('exifsrc').src = uri;
    var u = ['http://api.dan.co.jp/exif', cb, uri].join('/');
    var s = d.createElement('script');
    s.charset = 'UTF-8';
    s.id = s.src = u;
    d.body.appendChild(s);
  },
  run:function(json){
    var point = new GLatLng(
        dms2deg(json.GPSLatitude), 
        dms2deg(json.GPSLongitude)
    );
    gmap.map.setCenter(point, 12);
    var marker = new google.maps.Marker(point);
    gmap.map.addOverlay(marker);
    var html = [
      '緯度:' + point.y,
      '経度:' + point.x,
      '日時:' + json.DateTimeOriginal
    ].join('<'+'br>');
    google.maps.Event.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
  }
}

})(document);

Server Source

exif.cgi
※EXIF情報を取得して、JSONPで返すScript

#!/usr/local/bin/perl

use strict;
use warnings;
use LWP::UserAgent;
use CGI;
use CGI::Carp qw/fatalsToBrowser/;
use Image::ExifTool;
use JSON::Syck;

my $q = CGI->new;
my ( $callback, $uri ) = ( $q->path_info =~ m,^/([^/]+)/(.*),o );
$callback or die 'no callback!';
$uri =~ s,^(https?:)/+,$1//,o
  or die 'invalid scheme: ', $q->escapeHTML($uri);
$uri .= '?' . $ENV{QUERY_STRING} if $ENV{QUERY_STRING};

my $res = LWP::UserAgent->new->get($uri);
die "$uri ", $res->status_line unless $res->is_success;
die "$uri ", $res->headers->header('content-type'), " is not supported"
  unless $res->headers->header('content-type') =~ m{\Aimage/jpeg};
my $image = $res->content;

my $tool = Image::ExifTool->new;
my $exif = $tool->ImageInfo( \$image );
$exif->{uri} = $uri;

print
  "Content-Type: application/x-javascript; charset=utf-8\n\n",
  "$callback(", JSON::Syck::Dump( $exif ), ");\n";