下の[参照…]をクリックして、PCのディレクトリから写真画像を選択します(複数可)。
次に[実行]ボタンをクリックすると、EXIF 情報を取得して、次の情報を CSV形式で表示します。
画像表: "画像名"
属性表: width, height, "撮影日", 緯度, 経度
(一つの表にまとめたかったのですが、うまくいきませんでした)
撮影場所の地図を作成するためのデータ作成への利用を目的としています。
EXIF 情報を得るために、JavaScript のライブラリを用いています。
CDN: <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
ソースコード
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
</head>
<body>
<input id="画像参照ボタン" type="file" multiple onChange="実行()"></input><br>
<div id="結果表示場所"></div>
<script>
function 実行() {
var 結果 = '';
var 選択画像群 = document.getElementById("画像参照ボタン");
var 選択画像数 = 選択画像群.files.length;
for (var i=0; i<選択画像数; i++) {
var 画像 = 選択画像群.files[i];
var 画像名 = 画像.name;
結果 += "%lt;br>'" + 画像名 + "'";
// ====== FileReaderで選択した画像の読み込み
var fileReader = new FileReader();
fileReader.onload = function(e) {
// ====== exif情報の取得
var bytes = e.target.result;
var exif = EXIF.readFromBinaryFile(bytes);
// ====== exif情報の取得
var width = exif['PixelXDimension'];
var height = exif['PixelYDimension'];
var 撮影日時 = exif['DateTimeOriginal'];
撮影日時 = 撮影日時.substr(0,10);
var 緯度分秒 = exif['GPSLatitude'];
var 度分秒 = String(緯度分秒).split(",");
var 緯度 = 度分秒[0]/1 + 度分秒[1]/60 + 度分秒[2]/3600;
緯度 = Math.round(緯度*100000)/100000;
var 経度分秒 = exif['GPSLongitude'];
度分秒 = String(経度分秒).split(",");
var 経度 = 度分秒[0]/1 + 度分秒[1]/60 + 度分秒[2]/3600;
経度 = Math.round(経度*100000)/100000;
// ======== EXIF 情報の出力
結果 += "%lt;br> " + width;
結果 += ", " + height;
結果 += ", '" + 撮影日時 + "'";
結果 += ", " + 緯度;
結果 += ", " + 経度;
document.getElementById("結果表示場所").innerHTML = 結果;
};
fileReader.readAsArrayBuffer(画像);
}
}
</script>
</body></html>
緯度・経度を与えて住所を得ることを「逆ジオコーディング」といい、 「逆ジオコーディング 国土地理院API」で取得することができます。