3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML JavaScript

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

投稿日:

Exif.js
https://github.com/exif-js/exif-js

使い方

ここではローカルサーバーに配置したHTMLファイルから使用します。
fileプロトコルでアクセスしている場合はCORS policyのエラーが発生し、正常に動作しません。

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
  </head>
  <body>
    <img src="image.jpg" id="img">
    <pre id="exifData"></pre>
    <script>
      window.onload=getExif;

      function getExif() {
        var img = document.getElementById("img");
        EXIF.getData(img, function() {
          var make = EXIF.getTag(this, "Make");
          var model = EXIF.getTag(this, "Model");
          var exifData = document.getElementById("exifData");
          exifData.innerHTML = `${make} ${model}`;
        });
      }
    </script>
  </body>
</html>

CDNからライブラリ読込

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

Exifデータを取得する画像のimgタグとExifデータ表示用preタグ

<img src="image.jpg" id="img">
<pre id="exifData"></pre>

Exifデータを取得

function getExif() {
  var img = document.getElementById("img");
  EXIF.getData(img, function() {
  var make = EXIF.getTag(this, "Make");
  var model = EXIF.getTag(this, "Model");
  var exifData = document.getElementById("exifData");
  exifData.innerHTML = `${make} ${model}`;
  });
}

EXIF.getData関数の第一引数にExifデータを取得したい画像が設定されたimgタグを渡し、第二引数の関数内でEXIF.getTag関数を用いてExifデータを取得します。

ここでは公式のサンプル同様に、Make(画像入力機器のメーカ名)と、Model(画像入力機器のモデル名)を取得し、用意しておいたpreタグに表示しています。

すべてのExifデータを取得したい場合は以下の関数で取得できます。

EXIF.getAllTags(this);

-HTML, JavaScript


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

inputタグで選択した画像をimgタグに表示する

コード input要素で画像を選択した際に、選択した画像をimg要素に表示するサンプルコードです。 URL.createObjectURL()を使用する FileReader.readAsDataUR …

no image

input要素で選択したファイルのバイナリデータをFile APIで表示する

サンプルコード input要素で選択したファイルのバイナリデータを16進数表記でpre要素に出力します。 <input type="file"> <pre> …

no image

File APIでinput要素で選択したファイルの情報を確認する

サンプル <input type="file"> <script> const input = document.querySelector(‘input’ …

no image

JavaScriptで指定時間ごとに処理を実行する

指定時間ごとに処理を実行する setInterval関数の第一引数に指定時間経過ごとに実行したいコールバック関数を、第二引数に待機時間をミリ秒で指定します。 以下の例では関数callbackFuncを …