js 網頁開發

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&lt;1){
    t="1/"+Math.round(1/t);
}else{
    t=t+"秒";
}
var evnum = new Number(ev);
ev=evnum.toFixed(1);        

var showExit= "相機:"+make+"&lt;br&gt;"+
             "型號:"+model+"&lt;br&gt;"+
             "快門:"+t+" ("+$this.exif("ExposureTime")+"sec)&lt;br&gt;"+
             "光圈:F"+f+"&lt;br&gt;"+
             "ISO:"+iso+"&lt;br&gt;"+
             "焦段:"+length+"mm&lt;br&gt;"+
             "曝光補償:"+ev+"&lt;br&gt;"+
              "白平衡:"+wb+"&lt;br&gt;"+
              "飽和度:"+sa+"&lt;br&gt;"+
              "銳利度:"+sha+"&lt;br&gt;"+
             "軟體:"+soft+"&lt;br&gt;"+
              "解析度:"+dpi+"DPI&lt;br&gt;"+                    
              "日期:"+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資訊,這邊各位可依照所需自由去控制所要秀出的資訊,真的蠻方便的喔!
[範例預覽] [範例下載]