- blogs:
- cles::blog
2011/09/12

Exif を JavaScript で表示させる



写真のEXIFデータをサーバ側ではなく、クライアント側で読み取る「Nihilogic : Javascript EXIF Reader」というスクリプトが下記で紹介されていて興味深かったのでメモ。いつの間にかJavaScriptはクライアントサイドでバイナリのデータの読み込みができるようになったりしていたんですね。
今までであれば、バイナリファイルをサーバに送信して解析結果を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 を使ってログインすることができます。
サイト内検索
検索ワードランキング
へぇが多いエントリ
閲覧数が多いエントリ
1 . アーロンチェアのポスチャーフィットを修理(112199)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(110843)
3 . 年次の人間ドックへ(110428)
4 . 2023 年分の確定申告完了!(1つめ)(109968)
5 . 三菱鉛筆がラミーを買収(109868)
2 . 福岡銀がデマの投稿者への刑事告訴を検討中(110843)
3 . 年次の人間ドックへ(110428)
4 . 2023 年分の確定申告完了!(1つめ)(109968)
5 . 三菱鉛筆がラミーを買収(109868)
cles::blogについて
Referrers