2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-19

はじめに

 JavaScriptを使ってExif情報を取得するときに、Exif.jsがとても便利です。たった3行程の実装でカメラの機種やシャッタースピードなど基本の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を開くとレンズメーカーとレンズ機種が表示されます。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?