Javascriptで画像のexif情報を取得してみる

PHPを使ってexif情報を取得し，Javascriptで回転させるコードを過去に書いた．

今度は，javascriptを使って，jpeg画像からexif情報を取得したいと思う．
まずバイナリデータとしてjpg画像を読み取って・・・

なんと，jQuery exif-data-plugin なるものがあるらしい．
これを有り難く利用させて頂き，exif情報を取得してみた．

 

//imgタグを設置
<img src="exifを抜き出したい画像" id="image" exif="true" />

//jQueryを読み込む  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

//jQuery-exif-data-pluginを読み込む
 <script type="text/javascript" src="*****/jquery.exif.js"></script>


<script type="text/javascript">
<!--
  $("#image").click(function() {
  document.getElementById("ei").innerHTML = $(this).exifPretty();
  });
// -->
</script>
 <div id="ei"></div>

javascriptをimgタグの前に書いてしまってツボにはまってしまった．

imgタグが先に無いと動かなかった・・・

Blogger上で，Google+の画像に対して出来るか試したが，ダメだった．
ドメイン外だから，というのが理由のようだが，
Google+の画像サーバからアクセスを拒否られるとは思わなかった．
images0-focus-opensocial.googleusercontent.com が許可サーバかと思ったが，やはりダメだった．

Google+APIで取れる情報に，画像の向きも入れてくれればいいのに．
強引にでも，iframeの中に入れて・・・というように，面倒な手法が必要そう．
javascriptにこだわらないなら，
PHPのサーバサイドでexif情報を取得，返して貰うのが一番簡単なんじゃないかな・・・