BLOGTIMES
2011/09/12

Exif を JavaScript で表示させる

  javascript  exif 
このエントリーをはてなブックマークに追加

exif.js の実行例 - Exif を JavaScript で表示させる

写真のEXIFデータをサーバ側ではなく、クライアント側で読み取る「Nihilogic : Javascript EXIF Reader」というスクリプトが下記で紹介されていて興味深かったのでメモ。いつの間にかJavaScriptはクライアントサイドでバイナリのデータの読み込みができるようになったりしていたんですね。

写真に埋め込まれたメタデータ、ExifをJavaScriptで読み取る「Javascript EXIF Reader」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

今までであれば、バイナリファイルをサーバに送信して解析結果をWebブラウザで受け取って表示する、そんなやり方が当たり前だった。しかし今は違う。クライアントサイドで解析してその結果をサーバに送るのだ。その一つ、Exif解析を行うのがJavascript EXIF Readerだ。 Exifというのは写真などのJPEG画像に入ったメタ情報だ。撮影した時間や場所、カメラ、シャッター、絞り等カメラと写真に関する情報が詰め込まれている。Javascript EXIF Readerはそういった情報を読み取ってJavaScriptから自由に使えるようにする。

ページへの組み込み方

使い方としては binaryajax.js と exif.js をサーバに配置し、<head>タグ内で読み込みます。

<script src="http://example.com/path/to/exif.js" type="text/javascript"></script> <script src="http://example.com/path/to/binaryajax.js" type="text/javascript"></script>

<img>タグにはexif="true"という属性を追加します。

<img id="img" src="http://example.com/path/to/img.jpg" width="100" height="100" alt="img alt text" title="img title" exif="true" />

最後に例えば下記のような記述を追加しておけばクリックしたときにEXIFの内容をポップアップさせることができます。

<script> document.getElementById("img").onclick = function() { alert(EXIF.pretty(this)); }</script>

動作例はこのページでイメージをクリックしてみてください。


    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/4445
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン