用過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資訊,這邊各位可依照所需自由去控制所要秀出的資訊,真的蠻方便的喔!
[範例預覽] [範例下載]