Javascript, 網頁設計

jQuery外掛-jQuery.Exif仿Flickr顯示照片Exif資訊

梅干2011/01/07
  用過Flickr的朋友,應該對於Exif不感陌生,當到別人拍的漂亮的照片時,在右上角點一下,就可讓照片現出原形,立刻知道該照片是什麼相機、鏡頭、光圈、快門...等,來進行拍攝,而這些資訊就是所謂的EXIF,先前梅干曾透過PHP的方式讀取照片中的EXIF,但總覺得只是一個小東西,還得透過PHP就覺得有點殺雞用牛刀,最近梅干爬了一些文,看有無較簡單的方式,沒想到竟然透過jQuery就可辦到,這真是讓梅干對於jQuery愛不擇手,現在就來分享一下,透過jQuery.Exif讀取照片的EXIF。

Step1
這邊可看到原始的Exif資料中,前面為關鍵字,只要exif("關鍵字")就可單獨讀出該資訊。

<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.exif.js"></script>
<script>
$(window).load(function(){
var $this=$("#img").exifLoad(function(){
var make=$this.exif("Make");
var model=$this.exif("Model");
var t=$this.exif("ExposureTime");
var f=$this.exif("FNumber");
var length=$this.exif("FocalLength");
var iso=$this.exif("ISOSpeedRatings");
var ev=$this.exif("ExposureBias");
var soft=$this.exif("Software");
var date=$this.exif("DateTime");
var dpi=$this.exif("XResolution");
var sa=$this.exif("Saturation");
var sha=$this.exif("Sharpness");
var wb=$this.exif("WhiteBalance");

if(t<1){
t="1/"+Math.round(1/t);
}else{
t=t+"秒";
}
var evnum = new Number(ev);
ev=evnum.toFixed(1);

var showExit= "相機:"+make+"<br>"+
 "型號:"+model+"<br>"+
 "快門:"+t+" ("+$this.exif("ExposureTime")+"sec)<br>"+
 "光圈:F"+f+"<br>"+
 "ISO:"+iso+"<br>"+
 "焦段:"+length+"mm<br>"+
 "曝光補償:"+ev+"<br>"+
  "白平衡:"+wb+"<br>"+
  "飽和度:"+sa+"<br>"+
  "銳利度:"+sha+"<br>"+
 "軟體:"+soft+"<br>"+
  "解析度:"+dpi+"DPI<br>"+ 
  "日期:"+date;

$(".exif-data").html(showExit.replace(new RegExp(String.fromCharCode(0), "g"), ''));
  
var title=$this.attr("title");
var ps=$this.attr("alt");
$(".alumb h1").html(title);
$(".alumb p").html(ps);

alert("完整Exif資料:\r\n \r\n"+$this.exifPretty());
});
});
</script>

Step2
放到<body>~</body>間。
<div class="ImageExif">
<div class="alumb">
<h1></h1>
<img src="images/demo.jpg" id="img" exif="true" alt="自然光+Nikon 50mm F1.8" title="20100418台大廢墟" width="380"/>
<p></p>
</div>
<div class="exif-data"></div>
</div>

  好在有好友男丁相助,原來的範例得透過點擊後,才可顯示照片的EXIF,經由好友男丁的巧思下,讓一開始載入就可直接讀取出EXIF,下方的範例預覽中,會跳出一個Alert框,那就是jQuery.Exif取出原來的EXIF資訊,這邊各位可依照所需自由去控制所要秀出的資訊,真的蠻方便的喔!
[範例預覽] [範例下載]
UAG軍規iPhone防摔殼