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チャートライブラリPlotly.jsでチャートを描画する

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

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …

no image

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

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

no image

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

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

no image

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

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