画像からExif情報を読み取る(JS版)
写真を撮るようになってから「PHOTOHITO」という写真共有サイトを利用してるんだけど、
画像をアップすると「絞り値」や「ISO感度」等のExif情報を解析して表示してくれる。
これブログでも表示したいなーと思っていろいろ調べてみた。
試した方法としては2つ。
- Javascriptのライブラリを利用して解析する
- PHPで解析する
で、まずはJSのライブラリを使って自動で解析させようと思って見つけたのが「jquery.exif.js」。
まずは解析したい画像に「exif=”true”」の属性をつける。
|
1 |
<img src="画像のパス" exif="true"> |
JS側はこんな感じ。※jqueryのプラグインなのでjquery読み込みは必須
下記のコードで画像をクリックするとコンソールにObject型で情報が見れるはず。
|
1 2 3 |
$('img').click(function(){ console.log($(this).exifAll()); }); |
で、ここで気付いたんだけどjquery.exif.jsはclick等のアクションがないと情報が読み取れない。
プラグインサイトでもそのようなサンプルしか置いてない。
clickをtriggerさせてみたりしたけどローカルサーバでは動くけどhetemlサーバ上じゃ動かないみたい。
ということでJS版は却下。だけどせっかく調べたんでデモ置いときます。
次回PHPでの記事を書きます。
