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

シンプルなレスポンシブチャートJavaScriptライブラリChartist.jsの使い方

公式サイト http://gionkunz.github.io/chartist-js/index.html GETTING STARTEDhttp://gionkunz.github.io/char …

no image

JavaScriptでコンソールにデータを表形式で表示する関数Console.table

以下のように引数にオブジェクトを渡すと、その内容を表形式でコンソールに出力することができます。 console.table(["value1", "value2 …

no image

JavaScriptチャートライブラリPlotly.jsでチャートを描画する

公式サイト Plotly JavaScript Graphing Library | JavaScript | Plotlyhttps://plotly.com/javascript/ サンプルコード …

no image

ブラウザのコンソールからページ内の画像リストを確認する

ブラウザのコンソールにdocument.imagesの内容を出力すると、現在の文書内にある画像のリストが返され、任意の要素をクリックでその画像を確認することができます。 console.log(doc …

no image

タッチジェスチャーを実装するJavaScriptライブラリHammer.jsの使い方

こんにちは、今日はWebサイトにタッチジェスチャーを実装することができるJavaScriptライブラリ、Hammer.jsの使い方についてまとめていきます。 イベントの設定方法 通常のJavaScri …