上傳圖片的旋轉( jquery 及 php )

原先讓用戶上傳的照片欄位，最近被舉報說上傳的照片會轉九十度橫躺下來

因此上網查了一下，發現是手機拍照的緣故

只要是手機豎著拍的照片都會有這一個現象發生

因此只好在畫面上加上讓用戶來旋轉照片的按鈕


前台用來轉動照片最厲害的工具 還是 jquery.rotate

因此到其網站下載 jquery.rotate

在 header 內不要忘了加上


然候城市內唱船圖片及預覽的下方在擺上這幾個按鈕



而且語法很簡單

另外，我擺上一個 input hidden 的欄位，用來傳到後台，讓php 知道要轉幾度來慘動圖片


不過麻煩的是，php 轉圖片的方向和jquery 轉圖片的方向是顛倒的

	// html 的header 內要加上此段
	<script type="text/javascript" src="../js/jQueryRotate.js"></script>
	//圖片的上傳與旋轉
	<input type="file" name="photoName" id="photoName" value="" size="20" onchange="previewImage(this)" class="Bword02" style="width:260px;border:1px solid #000000;" />
	<div id="preview" style="height:320px;">
	<img id="imghead" src="<?=$pic;?>" width="240" height="300" style='border:6px double #ccc'/>
	</div>
	<div><span class="Bword02">旋轉：</span>
	<input type="button" id="turnPhoto" value="90" class="btn11"
	onclick="$('#imghead').rotate(+90);document.getElementById('degrees').value=90;" />
	<input type="button" id="turnPhoto" value="-90" class="btn11"
	onclick="$('#imghead').rotate(-90);document.getElementById('degrees').value=270;" />
	<input type="button" id="turnPhoto" value="0" class="btn11"
	onclick="$('#imghead').rotate(0);document.getElementById('degrees').value=0;" />
	<input type="button" id="turnPhoto" value="180" class="btn11"
	onclick="$('#imghead').rotate(180);document.getElementById('degrees').value=180;" />
	<input type="hidden" name="degrees" id="degrees" value="0" readonly size="3" />
	</div>
	// php 端的圖片上傳處理及旋轉
	$temp = $_FILES['photoName']["tmp_name"];
	$extension = explode('.',$_FILES['photoName']['name']);
	$ext = $extension[1]; // 副檔名
	$photoName = $mid.".".$ext;
	if ( file_exists('../files/'.$photoName) ){ // 上船前先刪檔
	unlink('../files/'.$photoName);
	}
	if ( move_uploaded_file($temp,'../files/'.$photoName) ){
	echo "success!";
	$degrees = strval(360 - intval($degrees)); // 調整jquery 轉動的角度為 php 的角度
	if($ext == 'png' || $ext == 'PNG'){
	header('Content-type: image/png');
	$source = imagecreatefrompng('../files/'.$photoName);
	$bgColor = imagecolorallocatealpha($source, 255, 255, 255, 127);
	$rotate = imagerotate($source, $degrees, $bgColor);
	imagesavealpha($rotate, true);
	imagepng($rotate,'../files/'.$photoName);
	}
	if($ext == 'jpg' || $ext == 'jpeg' || $ext == 'JPG'){
	header('Content-type: image/jpeg');
	$source = imagecreatefromjpeg('../files/'.$photoName);
	$rotate = imagerotate($source, $degrees, 0);
	imagejpeg($rotate,'../files/'.$photoName);
	}
	imagedestroy($source);
	imagedestroy($rotate);
	}else{
	echo "failure!";
	}

view raw gistfile1.txt hosted with ❤ by GitHub

大功告成！