jquery.exif.js(jQuery fileEXIF)は、jpeg画像からExif情報を取得するライブラリ。
phpなどのサーバー側に依存せず、javascriptだけでExif情報を取得できる。

やや重たい処理であるため、多用は禁物である。

公式サイト

アップロードファイルからExifを取得

ファイル送信要素(<input type="file" />)によるアップロードファイルからExif情報を取得できる。

html
		<script src="jquery.exif.js"></script>
		~略~
		<input type="file" id="file1" />
	

javascript
	$('#file1').change(function() {
		// アップロードファイルからExif情報を抜出す。
		$(this).fileExif(function(exif) {
			console.log(exif);
		});
	});
	

サンプル1



サーバー上のjpegからExif情報を取得

サーバー上のjpegからAjaxを通して、バイトデータ(バイナリ情報)を取得し、バイトデータからBlobを作成する。
そのBlobをjquery.exif.jsの関数fileExifに渡して、Exif情報を取得できる。

html
	<script src="jquery.exif.js"></script>

javascript
	function test(){
		// サーバー上の画像ファイルから、Ajaxを利用してバイトデータを取得する
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'img/test4.jpg', true);
		xhr.responseType = 'arraybuffer';
		xhr.onload = function(e) {
			
			// 画像ファイルのバイトデータを取得する
			var arrayBuffer = this.response;
	
			// バイトデータとコンテンツタイプからBlobを生成する
			var blob = new Blob([arrayBuffer], {type: "image/jpeg"});
			
			// BlobからExif情報を取得する
			$.fileExif(blob,function(exif){
				console.log(exif);
			});
		};
		xhr.send();
	}
	

サンプル2




Exif出力