利用jquery Jcrop跟 php實現截圖功能

利用jquery Jcrop和 php實現功能

項目中用到了一個上傳頭像的功能，需要進行無重新整理的圖片上傳，並對上傳後的圖片進行使用者要求的，無重新整理上傳我就不說了，用的Juploader，相信大家並不陌生，重點講一下jcron和php配置實現圖片的截取的功能，好了，言歸正傳。首先介紹一下jcron的用法，我就不一一解釋了，我們只看最經常用的到功能：

$(function(){$('#cropbox').Jcrop({aspectRatio: 1,onSelect: updateCoords});});

以上是控制，對哪個圖片進行，“cropbox”是你要截取的img對象的id，“aspectRatio”控制等比例截取，“onSelect”的值是一個方法名，在選取時調用的方法

，個參數詳情解釋如下：

Option Name	Value Type	Description	Default
aspectRatio	decimal	Aspect ratio of w/h (e.g. 1 for square)	n/a
minSize	array [ w, h ]	Minimum width/height, use 0 for unbounded dimension	n/a
maxSize	array [ w, h ]	Maximum width/height, use 0 for unbounded dimension	n/a
setSelect	array [ x, y, x2, y2 ]	Set an initial selection area	n/a
bgColor	color value	Set color of background container	'black'
bgOpacity	decimal 0 - 1	Opacity of outer image when cropping	.6

選取時的回調方法

function updateCoords(c){$('#x').val(c.x);$('#y').val(c.y);$('#w').val(c.w);$('#h').val(c.h);};

有了這個方法，可以在你是更新隱藏欄位中的座標值，通過隱藏欄位把座標資訊傳到後台。

ok，到此，前台已經告一段落，我們看背景php代碼。

後台php主要是根據前台傳遞的座標，對原圖進行截取，支援jpg，png，和gif三種圖片格式，當然，你可以擴充他，使他支援更多的圖片格式。

class Img_shot{private $filename;private $ext;private $x;private $y;private $x1;private $y1;private $width = 124;private $height = 124;private $jpeg_quality = 90;/** * 構造器 * *  */public function __construct(){log_message('debug', "Img_shot Class Initialized");}/** * 初始化對象 *@param filename 源檔案路徑全明 *@param width  的寬 *@param height  的高 *@param x  橫座標1 *@param y  縱座標1 *@param x1  橫座標1 *@param y1  橫座標2 *  */public function initialize($filename,$x,$y,$x1,$y1){if(file_exists($filename)){$this->filename = $filename;$pathinfo = pathinfo($filename);$this->ext = $pathinfo['extension'];}else{$e = new Exception('the file is not exists!',1050);throw $e;}$this->x = $x;$this->y = $y;$this->x1 = $x1;$this->y1 = $y1;}/** * 產生 * 根據圖片的格式，產生不同的 */public function generate_shot(){switch($this->ext){case 'jpg':return $this->generate_jpg();break;case 'png':return $this->generate_png();break;case 'gif':return $this->generate_gif();break;default:return false;}}/** * 得到產生的的檔案名稱 *  */private function get_shot_name(){$pathinfo = pathinfo($this->filename);$fileinfo = explode('.',$pathinfo['basename']);$filename = $fileinfo[0] . '_small.' . $this->ext;return $pathinfo['dirname'] . '/' .$filename;}/** * 產生jpg格式的圖片 *  */private function generate_jpg(){$shot_name = $this->get_shot_name();$img_r = imagecreatefromjpeg($this->filename);$dst_r = ImageCreateTrueColor($this->width, $this->height);imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,$this->width,$this->height,$this->x1,$this->y1);imagejpeg($dst_r,$shot_name,$this->jpeg_quality);return $shot_name;}/** * 產生gif格式的圖片 *  */private function generate_gif(){$shot_name = $this->get_shot_name();$img_r = imagecreatefromgif($this->filename);$dst_r = ImageCreateTrueColor($this->width, $this->height);imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,$this->width,$this->height,$this->x1,$this->y1);imagegif($dst_r,$shot_name);return $shot_name;}/** * 產生png格式的圖片 *  */private function generate_png(){$shot_name = $this->get_shot_name();$img_r = imagecreatefrompng($this->filename);$dst_r = ImageCreateTrueColor($this->width, $this->height);imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,$this->width,$this->height,$this->x1,$this->y1);imagepng($dst_r,$shot_name);return $shot_name;}}

接收到前台的座標資訊後，你可以執行個體化該類，用來產生圖片，返回產生的圖片的名稱，你就可以使用啦。

截完圖之後：

