inputで入力した画像からexifrを用いて経度、緯度を取得する

業務で画像の経度、緯度の欲しいと言われた。調べると、exif-js もしくは exifr を使うといい感じみたい。

バックエンドが Django だったため、サーバーサイドで処理してもよかったが、exifr が思いの外はやかったので採用した。

サンプル

    <input type="file" id="choose-image"></input>
    <input type="text" id="hoge"></input>
    <script>
        const btn = document.getElementById("hoge");
        const chooseFile = document.getElementById("choose-image");
        chooseFile.addEventListener("change", () => {
            const files = chooseFile.files[0];
            window.exifr.gps(files).then(res => {
                btn.value = res.latitude;
            }
            )
            //window.exifr.parse(files).then(exif => console.log('Exposure:', exif.GPSLatitude));
        });

    </script>