exif.jsでタグを追加して、レンズ名を取得する方法

はじめに

　JavaScriptを使ってExif情報を取得するときに、Exif.jsがとても便利です。たった３行程の実装でカメラの機種やシャッタースピードなど基本のExif情報を取り出せます。
ただ、最近はレンズ情報もexifに入ってるんですが、デフォルトだとレンズ情報のタグが含まれおらず残念ながら取り出せません。（issueで上がってるので近々対応しそうではありますが。。）
　レンズ情報を取る方法がないか調べてたら、Exifのタグ情報を追加することで取得できたのでメモにしておきます。

準備

Browsersyncインストール

htmlとjsファイルだけで実行しようとするとCORSエラーがでるので、Browsersyncを使います。

インストールはこちらを参照
https://tech.medpeer.co.jp/entry/2015/06/09/071758

なお、chromeのセキュリティーポリシーを回避する方法もあるので、そちらの方法でもOKです。

実装

index.html

<img src="image1.jpg" id="img" />
<pre>Make and model: <span id="lens"></span></pre>

EXIF.getDataの前に、EXIF.Tagsにtagを追加します。

sample.js

window.onload=getExif;

window.onload=getExif;

function getExif() {
    var img = document.getElementById("img");
    EXIF.Tags[0xA433]="LensMake"; // tagを追加
    EXIF.Tags[0xA434]="LensModel"; // tagを追加
    EXIF.getData(img, function() {
        var make = EXIF.getTag(this, "LensMake");
        var model = EXIF.getTag(this, "LensModel");
        var makeAndModel = document.getElementById("lens");
        makeAndModel.innerHTML = `${make} ${model}`;
        debugger;
    });
}

index.htmlを開くとレンズメーカーとレンズ機種が表示されます。