クライアントjavascriptのみで、画像のexif,GPS位置情報を取得する方法

program

http://amaraimusi.sakura.ne.jp/sample/js/jquery_exif_js/jquery_exif_js.html
http://plugins.jquery.com/file-exif/
jquery.exif.js という便利なライブラリがあるので、それを使う。
「99度、99分、99秒」という形式で取得されてしまうので、google maps などで使えるように度の実数形式に変換する。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script src="jquery.exif.js"></script>
</head>
<body>
<input type="file" id="file1" />
<script>
$('#file1').change(function() {
	$(this).fileExif(function(exif) {
		if (!exif) {
			console.log("exif情報なし");
			return;
		}
		if (!exif.GPSLatitude) {
			console.log("GPS情報なし");
			return;
		}
		var lat = exif.GPSLatitude[0]  + (exif.GPSLatitude[1] / 60)  + (exif.GPSLatitude[2] / 3600);
		var lng = exif.GPSLongitude[0] + (exif.GPSLongitude[1] / 60) + (exif.GPSLongitude[2] / 3600);
		console.log({lat,lng}); // google maps とかで使える形式
	});
});
</script>
</body>
</html>

ちなみに、以下でもいい。jquery.exif.jsのソースを見ればわかるが、やっていることは完全に同じ。

	$.fileExif(this.files[0], function(exif) { ...