画像からExif情報(GPS)を取得する node.js or Javascript EXIF Reader

画像からExif情報(の中の位置情報)を取得する方法メモ。

■ サーバーサイド(node.js)

node-exifというライブラリがあったので使ってみる。

npm install exif

1	npm install exif

var ExifImage = require('exif').ExifImage;

try {
    new ExifImage({ image : 'test.jpg' }, function (error, image) {
        if (error)
            console.log('Error: '+error.message);
        else
            console.dir(image['gps']);
    });
} catch (error) {
    console.log('Error: ' + error);
}

var ExifImage = require('exif').ExifImage;

try {

new ExifImage({ image : 'test.jpg' }, function (error, image) {

if (error)

console.log('Error: '+error.message);

else

console.dir(image['gps']);

});

} catch (error) {

console.log('Error: ' + error);

}

$ node getEXIF.js

1	$ node getEXIF.js

Exif情報は取得できるが、なぜか正しい位置情報が取得できない。

gps:[
  { tag: <Buffer 00 01>,
    format: 2,
    components: 2,
    value: 'N',
    tagName: 'GPSLatitudeRef' },
  { tag: <Buffer 00 02>,
    format: 5,
    components: 3,
    value: [ 36, 36, 36 ],
    tagName: 'GPSLatitude' },
  { tag: <Buffer 00 03>,
    format: 2,
    components: 2,
    value: 'E',
    tagName: 'GPSLongitudeRef' },
  { tag: <Buffer 00 04>,
    format: 5,
    components: 3,
    value: [ 139, 139, 139 ],
    tagName: 'GPSLongitude' },
  { tag: <Buffer 00 07>,
    format: 5,
    components: 3,
    value: [ 11, 11, 11 ],
    tagName: 'GPSTimeStamp' }
]

gps:[

{ tag: <Buffer 00 01>,

format: 2,

components: 2,

value: 'N',

tagName: 'GPSLatitudeRef' },

{ tag: <Buffer 00 02>,

format: 5,

components: 3,

value: [ 36, 36, 36 ],

tagName: 'GPSLatitude' },

{ tag: <Buffer 00 03>,

format: 2,

components: 2,

value: 'E',

tagName: 'GPSLongitudeRef' },

{ tag: <Buffer 00 04>,

format: 5,

components: 3,

value: [ 139, 139, 139 ],

tagName: 'GPSLongitude' },

{ tag: <Buffer 00 07>,

format: 5,

components: 3,

value: [ 11, 11, 11 ],

tagName: 'GPSTimeStamp' }

]

しかたがないので、imagemagickのwrapper(node-imagemagick)を使う。
非同期のフロー制御にasyncを使うので、一緒にインストールする。

$ yum install ImageMagick
$ npm install imagemagick
$ npm install async

$ yum install ImageMagick

$ npm install imagemagick

$ npm install async

var im = require('imagemagick');
var async = require('async');
 
 var imgFile = 'test.jpg';
 
 async.series(
 [
	 function(callback) { im.identify(['-format', '%[EXIF:GPSLatitude]', imgFile],
		 function(err, metadata){ 
			if (err) callback(err);
			callback(null, { 'GPSLatitude': metadata.trimRight() });
		 });
	 }, function(callback) { im.identify(['-format', '%[EXIF:GPSLatitudeRef]', imgFile],
		 function(err, metadata){ 
			if (err) callback(err);
			callback(null, { 'GPSLatitudeRef': metadata.trimRight() });
		 });
	 }, function(callback) { im.identify(['-format', '%[EXIF:GPSLongitude]', imgFile],
		 function(err, metadata){ 
			if (err) callback(err);
			callback(null, { 'GPSLongitude': metadata.trimRight() });
		 });
	 }, function(callback) { im.identify(['-format', '%[EXIF:GPSLongitudeRef]', imgFile ],
		 function(err, metadata){ 
			if (err) callback(err);
			callback(null, { 'GPSLongitudeRef': metadata.trimRight() });
		 });
	 }
 ],
 function(err, results){
    console.dir(results);
});

var im = require('imagemagick');

var async = require('async');

var imgFile = 'test.jpg';

async.series(

[

function(callback) { im.identify(['-format', '%[EXIF:GPSLatitude]', imgFile],

function(err, metadata){

if (err) callback(err);

callback(null, { 'GPSLatitude': metadata.trimRight() });

});

}, function(callback) { im.identify(['-format', '%[EXIF:GPSLatitudeRef]', imgFile],

function(err, metadata){

if (err) callback(err);

callback(null, { 'GPSLatitudeRef': metadata.trimRight() });

});

}, function(callback) { im.identify(['-format', '%[EXIF:GPSLongitude]', imgFile],

function(err, metadata){

if (err) callback(err);

callback(null, { 'GPSLongitude': metadata.trimRight() });

});

}, function(callback) { im.identify(['-format', '%[EXIF:GPSLongitudeRef]', imgFile ],

function(err, metadata){

if (err) callback(err);

callback(null, { 'GPSLongitudeRef': metadata.trimRight() });

});

}

function(err, results){

console.dir(results);

});

$ node getECIF2.js

1	$ node getECIF2.js

正しく、位置情報が取得できた。

[
  { GPSLatitude: '36/1, 1968/100, 0/1' },
  { GPSLatitudeRef: 'N' },
  { GPSLongitude: '139/1, 49/100, 0/1' },
  { GPSLongitudeRef: 'E' }
]

[

{ GPSLatitude: '36/1, 1968/100, 0/1' },

{ GPSLatitudeRef: 'N' },

{ GPSLongitude: '139/1, 49/100, 0/1' },

{ GPSLongitudeRef: 'E' }

]

■ クライアントサイド
下記ライブラリを使用する（今回はjQuery版を使用）
Javascript EXIF Reader
Javascript EXIF Reader – jQuery Plugin
使用法はいたって簡単。
ライブラリを読み込んでjQueryオブジェクトのメソッドとして「.exif()」を使用するだけ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.exif.js"></script>
<title>Javascript EXIF Reader text</title>

</head>
<body>
<a href="http://www.nihilogic.dk/labs/exif/">Javascript EXIF Reader</a> テスト(クリックで位置情報表示)
<img src="test.jpg" id="img" exif="true" />

<script>
$("#img").click(function() {
	alert(
	      "Longitude: " + $(this).exif("GPSLongitude") + "n" +
	      "Latitude: " + $(this).exif("GPSLatitude")
	      );
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Javascript EXIF Reader text</title>

</head>

<body>

<a href="http://www.nihilogic.dk/labs/exif/">Javascript EXIF Reader</a> テスト(クリックで位置情報表示)

$("#img").click(function() {

alert(

"Longitude: " + $(this).exif("GPSLongitude") + "n" +

"Latitude: " + $(this).exif("GPSLatitude")

);

});

</script>

</body>

</html>

example

ただ、「input type=’file’」で選択した画像から上記ライブラリでExif情報を取得する方法がわからない（できない？）
data URI schemeにしてしまうとExif情報は取得できないみたい。
クライアント側で完結できないみたいなので、結局サーバー側に画像を一旦保存する必要があるっぽい。

//このコードは動かない
$("#uploadFile").change(function() {

    var file = this.files[0]; //input type="file"からファイルを取得
    if (!file.type.match(/^image/(png|jpeg|gif)$/)) return;

    var reader = new FileReader();
    reader.readAsDataURL(file); //data URI schemeとしてファイルを読み込み
    reader.onload = function(evt) {
	    $("#img").attr("src", evt.target.result); //取得したデータをimgタグのsrcに追加
    }
    
    //imgタグのsrcに指定されているのがdata URI schemeだとExifが取得できない
   $("#img").click(function() { 
    alert(
	  "Longitude: " + $(this).exif("GPSLongitude") + "n" +
	  "Latitude: " + $(this).exif("GPSLatitude")
	  );
    });        
});

//このコードは動かない

$("#uploadFile").change(function() {

var file = this.files[0]; //input type="file"からファイルを取得

if (!file.type.match(/^image/(png|jpeg|gif)$/)) return;

var reader = new FileReader();

reader.readAsDataURL(file); //data URI schemeとしてファイルを読み込み

reader.onload = function(evt) {

$("#img").attr("src", evt.target.result); //取得したデータをimgタグのsrcに追加

}

//imgタグのsrcに指定されているのがdata URI schemeだとExifが取得できない

$("#img").click(function() {

alert(

"Longitude: " + $(this).exif("GPSLongitude") + "n" +

"Latitude: " + $(this).exif("GPSLatitude")

);

});

投稿者: shimizu