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

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


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

関連記事

no image

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

JavaScriptで0埋めする方法

こんにちは、今日はJavaScriptで0埋めする方法についてまとめていきます。 0埋め 以下のような関数で第一引数に0埋めしたい数値を、第二引数に数値の桁数を指定すると、指定桁数になるように0埋めさ …

no image

JavaScriptでスタックトレースを出力する関数Console.trace

console.trace()を実行するとコンソールにスタックとレースを出力することができます。 function test1() { test2(); } function test2() { co …

no image

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

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

no image

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

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