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

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

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

no image

カルーセルを実装するjQueryプラグインslickの使い方

こんにちは、今日はカルーセルを実行できるjQueryプラグイン、slickの使い方についてまとめていきます。 公式サイト https://kenwheeler.github.io/slick/ ダウン …

no image

ブラウザのコンソールからページ内の埋め込みリストを確認する

ブラウザのコンソールにdocument.embedsの内容を出力すると、現在の文書内にある埋め込みのリストが返されます。 console.log(document.embeds)

no image

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

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

no image

JavaScriptで0埋めする方法

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