上傳圖片獲取EXIF相片資訊

發表留言 人氣: 2611°c

最近做了一個上傳圖片的程序,用戶上傳照片後,希望加入EXIF相片資訊,能夠查看到照片的相機型號﹑ISO感光度﹑焦距﹑高寬度等資料。

在Google的幫忙下,搜尋Jquery exif相關資料,使用JE的API獲取EXIF的詳細資訊。

在製作的過程可為順利,但後來做完了又感覺沒有必要的功能 -.- ,不過竟然做了不要白費唷,分享源碼出來給大家參考一番了。

upload.php 文件︰
<?php
header("content-Type: text/html; charset=utf-8");
$uptypes=array('image/jpg', //上傳文件類型列表
'image/jpeg',
'image/pjpeg');
$max_file_size=100000000; //上傳文件大小限制, 單位BYTE
$path_parts=pathinfo($_SERVER['PHP_SELF']); //取得當前路徑
$destination_folder="images/"; //上傳文件路徑
$watermark=0; //是否附加水印(1為加水印,0為不加水印);
$watertype=1; //水印類型(1為文字,2為圖片)
$waterposition=2; //水印位置(1為左下角,2為右下角,3為左上角,4為右上角,5為居中);
$waterstring="www.moonlol.com"; //水印字符串
$waterimg="moonlit.gif"; //水印圖片
$imgpreview=1; //是否生成預覽圖(1為生成,0為不生成);
$imgpreviewsize=1/1; //縮略圖比例
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXIF 信息</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.exif.js"></script>
<script type="text/javascript">
$(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= "<b>相機:</b>"+make+"<br><br>"+
"<b>型號:</b>"+model+"<br><br>"+
"<b>快門:</b>"+t+" ("+$this.exif("ExposureTime")+"sec)<br><br>"+
"<b>光圈:</b>F"+f+"<br><br>"+
"<b>ISO:</b>"+iso+"<br><br>"+
"<b>焦段:</b>"+length+"mm<br><br>"+
"<b>曝光補償:</b>"+ev+"<br><br>"+
"<b>白平衡:</b>"+wb+"<br><br>"+
"<b>飽和度:</b>"+sa+"<br><br>"+
"<b>銳利度:</b>"+sha+"<br><br>"+
"<b>軟體:</b>"+soft+"<br><br>"+
"<b>解析度:</b>"+dpi+"DPI<br><br>"+
"<b>拍攝日期:</b>"+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>
<script type="text/javascript">function select_format(){var on=document.getElementById('fmt').checked;document.getElementById('site').style.display=on?'none':'';document.getElementById('sited').style.display=!on?'none':'';};var flag=false;function DrawImage(ImgD){var image=new Image();image.src=ImgD.src;if(image.width>0&&image.height>0){flag=true;if(image.width/image.height>=120/80){if(image.width>120){ImgD.width=120;ImgD.height=(image.height*120)/image.width;}else {ImgD.width=image.width;ImgD.height=image.height;};ImgD.alt=image.width+"×"+image.height;}else {if(image.height>80){ImgD.height=80;ImgD.width=(image.width*80)/image.height;}else {ImgD.width=image.width;ImgD.height=image.height;};ImgD.alt=image.width+"×"+image.height;}};};function FileChange(Value){flag=false;document.all.uploadimage.width=10;document.all.uploadimage.height=10;document.all.uploadimage.alt="";document.all.uploadimage.src=Value;};</script>
</head>
<body>
<style type="text/css">
body {
padding:0;
margin:0;
font-size:12px;
}
#wrapper {
width:960px;
margin:50px auto;
min-height:400px;
}
#image {
float:left;
}
#backder {
border:1px solid #CCC;
padding:5px;
margin-bottom:5px;
}
#imageMeta {
margin:0 0 0 10px;
float:left;
}
</style>
<div id="wrapper">
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!is_uploaded_file($_FILES["exif"][tmp_name]))
//是否存在文件
{
echo "<font color='red'>沒有上載圖像文件!</font>";
echo "<a href='/exif'>請按此返回</a>";
exit;
}
$file = $_FILES["exif"];
if($max_file_size < $file["size"])
//檢查文件大小
{
echo "<font color='red'>文件太大!</font>";
exit;
}
if(!in_array($file["type"], $uptypes))
//檢查文件類型
{
echo "<font color='red'>不支援此類型圖像文件!</font>";
echo "<a href='/exif'>請按此返回</a>";
exit;
}
if(!file_exists($destination_folder))
mkdir($destination_folder);
$filename=$file["tmp_name"];
$image_size = getimagesize($filename);
$pinfo=pathinfo($file["name"]);
$ftype=$pinfo[extension];
$destination = $destination_folder.time().".".$ftype;
if (file_exists($destination) && $overwrite != true)
{
echo "<font color='red'>同名文件已經存在了!</a>";
exit;
}
if(!move_uploaded_file ($filename, $destination))
{
echo "<font color='red'>移動文件出錯!</a>";
exit;
}
$pinfo=pathinfo($destination);
$fname=$pinfo[basename];
if($watermark==1)
{
$iinfo=getimagesize($destination,$iinfo);
$nimage=imagecreatetruecolor($image_size[0],$image_size[1]);
$white=imagecolorallocate($nimage,255,255,255);
$black=imagecolorallocate($nimage,0,0,0);
$red=imagecolorallocate($nimage,255,0,0);
imagefill($nimage,0,0,$white);
switch ($iinfo[2])
{
case 1:
$simage =imagecreatefromgif($destination);
break;
case 2:
$simage =imagecreatefromjpeg($destination);
break;
case 3:
$simage =imagecreatefrompng($destination);
break;
case 6:
$simage =imagecreatefromwbmp($destination);
break;
default:
die("<font color='red'>不能上傳此類型文件!</a>");
exit;
}
imagecopy($nimage,$simage,0,0,0,0,$image_size[0],$image_size[1]);
imagefilledrectangle($nimage,1,$image_size[1]-15,80,$image_size[1],$white);
switch($watertype)
{
case 1: //加水印字符串
imagestring($nimage,2,3,$image_size[1]-15,$waterstring,$black);
break;
case 2: //加水印圖片
$simage1 =imagecreatefromgif("xplore.gif");
imagecopy($nimage,$simage1,0,0,0,0,85,15);
imagedestroy($simage1);
break;
}
switch ($iinfo[2])
{
case 1:
//imagegif($nimage, $destination);
imagejpeg($nimage, $destination);
break;
case 2:
imagejpeg($nimage, $destination);
break;
case 3:
imagepng($nimage, $destination);
break;
case 6:
imagewbmp($nimage, $destination);
//imagejpeg($nimage, $destination);
break;
}
//覆蓋原上傳文件
imagedestroy($nimage);
imagedestroy($simage);
}
if($imgpreview==1)
{
echo " <div id=image>";
echo " <div id=backder>";
echo " <a href=\"".$destination."\" target='_blank'><img src=\"".$destination."\" id=\"img\" exif=\"true\" width=".(500)." height=".(500);
echo " title=\"信息:\r文件名:".$fname."\r上傳時間:".date('m/d/Y h:i')."\" border='0'></a>";
echo " </div>";
}
echo " </div>";
echo " <div id=imageMeta>";
echo " <div>";
echo " </div>";
echo " <br>";
echo " <b>寬度︰</b>".$image_size[0];
echo " <br><br>";
echo " <b>高度︰</b>".$image_size[1];
echo " </div>";
}
?>
<div style="clear:both">
<a href="/test3">按此返回</a>
</div>
</div>
</body>
</html>

index.html文件︰
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讀取圖片Exif信息</title>
<meta name="keywords" content="Exif" />
<meta name="description" content="Exif資訊" />
</head>
<body>
<form action="/test3/upload.php" enctype="multipart/form-data" method="post" name="upform">
<img id=uploadimage height=0 width=0 src="" onload="javascript:DrawImage(this);" />
<input class="inputbutton" name="exif" type="file" onchange="javascript:FileChange(this.value);" />
<input class="inputbutton" type="submit" value="讀取EXIF" />
</form>
</body>
</html>

應用說明︰
1. test3 為程序所在的目錄,如不同,請自行修改
2. 創建圖片目錄"images“並給予權限為"777"
3. 請下載"jquery“及"jquery.exif“文件並放在"js“目錄下

EXIF完整程序包︰
下載地址︰請按此!!
說明︰直接上傳到空間(主機)即可

EXIF圖片演示︰

標籤: