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