下の[参照…]をクリックして、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」で取得することができます。