whitebook.log

Photo & Programming

Author : laqu [FrontendEngineer]

Program : Javascript,Swift,ActionScript

Camera : Canon EOS6D, Olympus E-P5, Ricoh GR

画像からExif情報を読み取る(JS版)

その2を書きました

写真を撮るようになってから「PHOTOHITO」という写真共有サイトを利用してるんだけど、
画像をアップすると「絞り値」や「ISO感度」等のExif情報を解析して表示してくれる。

これブログでも表示したいなーと思っていろいろ調べてみた。
試した方法としては2つ。

  1. Javascriptのライブラリを利用して解析する
  2. PHPで解析する

で、まずはJSのライブラリを使って自動で解析させようと思って見つけたのが「jquery.exif.js」。
まずは解析したい画像に「exif=”true”」の属性をつける。

JS側はこんな感じ。※jqueryのプラグインなのでjquery読み込みは必須
下記のコードで画像をクリックするとコンソールにObject型で情報が見れるはず。

で、ここで気付いたんだけどjquery.exif.jsはclick等のアクションがないと情報が読み取れない。
プラグインサイトでもそのようなサンプルしか置いてない。
clickをtriggerさせてみたりしたけどローカルサーバでは動くけどhetemlサーバ上じゃ動かないみたい。
ということでJS版は却下。だけどせっかく調べたんでデモ置いときます。

DEMO

次回PHPでの記事を書きます。

Tags

Exif jquery

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*