利用jquery Jcrop和 php实现截图功能

利用jquery Jcrop和 php实现截图功能

分类： php开发 web前台技术 2012-09-21 09:58  47人阅读  评论(0)  收藏  举报

项目中用到了一个上传头像的功能，需要进行无刷新的图片上传，并对上传后的图片进行用户要求的截图，无刷新上传我就不说了，用的Juploader，相信大家并不陌生，重点讲一下jcron和php配置实现图片的截取的功能，好了，言归正传。首先介绍一下jcron的用法，我就不一一解释了，我们只看最经常用的到截图功能：

[javascript]  view plain copy print ?

1. <span style="font-size: 18px; ">$(function(){  
2.   
3.   
4.                 $('#cropbox').Jcrop({  
5.                     aspectRatio: 1,  
6.                     onSelect: updateCoords  
7.                 });  
8.   
9.   
10.             });</span>  

以上是控制，对哪个图片进行截图，“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

选取时的回调方法

[javascript]  view plain copy print ?

1. <span style="font-size:18px;">function updateCoords(c)  
2.             {  
3.                 $('#x').val(c.x);  
4.                 $('#y').val(c.y);  
5.                 $('#w').val(c.w);  
6.                 $('#h').val(c.h);  
7.             };</span>  

有了这个方法，可以在你截图是更新隐藏域中的坐标值，通过隐藏域把坐标信息传到后台。

[html]  view plain copy print ?

1. <span style="font-size:18px;"><form action="crop.php" method="post" onsubmit="return checkCoords();">  
2.             <input type="hidden" id="x" name="x" />  
3.             <input type="hidden" id="y" name="y" />  
4.             <input type="hidden" id="w" name="w" />  
5.             <input type="hidden" id="h" name="h" />  
6.             <input type="submit" value="Crop Image" />  
7.         </form></span>  

ok，到此，前台已经告一段落，我们看后台的php代码。

后台php主要是根据前台传递的坐标，对原图进行截取，支持jpg，png，和gif三种图片格式，当然，你可以扩展他，使他支持更多的图片格式。

[php]  view plain copy print ?

1. <span style="font-size:18px;">class Img_shot  
2. {  
3.       
4.     private $filename;  
5.     private $ext;  
6.     private $x;  
7.     private $y;  
8.     private $x1;  
9.     private $y1;  
10.     private $width = 124;  
11.     private $height = 124;  
12.     private $jpeg_quality = 90;  
13.     /** 
14.      * 构造器 
15.      * 
16.      *  
17.      */  
18.     public function __construct()  
19.     {  
20.         log_message('debug', "Img_shot Class Initialized");  
21.     }  
22.     /** 
23.      * 初始化截图对象 
24.      *@param filename 源文件路径全明 
25.      *@param width  截图的宽 
26.      *@param height  截图的高 
27.      *@param x  横坐标1 
28.      *@param y  纵坐标1 
29.      *@param x1  横坐标1 
30.      *@param y1  横坐标2 
31.      *  
32.      */  
33.     public function initialize($filename,$x,$y,$x1,$y1)  
34.     {  
35.         if(file_exists($filename))  
36.         {  
37.             $this->filename = $filename;  
38.             $pathinfo = pathinfo($filename);  
39.             $this->ext = $pathinfo['extension'];  
40.         }  
41.         else  
42.         {  
43.             $e = new Exception('the file is not exists!',1050);  
44.             throw $e;  
45.         }  
46.         $this->x = $x;  
47.         $this->y = $y;     
48.         $this->x1 = $x1;   
49.         $this->y1 = $y1;   
50.     }  
51.     /** 
52.      * 生成截图 
53.      * 根据图片的格式，生成不同的截图 
54.      */  
55.     public function generate_shot()  
56.     {  
57.         switch($this->ext)  
58.         {  
59.             case 'jpg':  
60.                 return $this->generate_jpg();  
61.                 break;  
62.             case 'png':  
63.                 return $this->generate_png();  
64.                 break;  
65.             case 'gif':  
66.                 return $this->generate_gif();  
67.                 break;  
68.             default:  
69.                 return false;  
70.         }  
71.     }  
72.     /** 
73.      * 得到生成的截图的文件名 
74.      *  
75.      */  
76.     private function get_shot_name()  
77.     {  
78.         $pathinfo = pathinfo($this->filename);  
79.         $fileinfo = explode('.',$pathinfo['basename']);  
80.         $filename = $fileinfo[0] . '_small.' . $this->ext;  
81.         return $pathinfo['dirname'] . '/' .$filename;  
82.     }  
83.     /** 
84.      * 生成jpg格式的图片 
85.      *  
86.      */  
87.     private function generate_jpg()  
88.     {  
89.         $shot_name = $this->get_shot_name();  
90.         $img_r = imagecreatefromjpeg($this->filename);  
91.         $dst_r = ImageCreateTrueColor($this->width, $this->height);  
92.   
93.         imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,  
94.         $this->width,$this->height,$this->x1,$this->y1);  
95.         imagejpeg($dst_r,$shot_name,$this->jpeg_quality);  
96.         return $shot_name;  
97.     }  
98.     /** 
99.      * 生成gif格式的图片 
100.      *  
101.      */  
102.     private function generate_gif()  
103.     {  
104.         $shot_name = $this->get_shot_name();  
105.         $img_r = imagecreatefromgif($this->filename);  
106.         $dst_r = ImageCreateTrueColor($this->width, $this->height);  
107.   
108.         imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,  
109.         $this->width,$this->height,$this->x1,$this->y1);  
110.         imagegif($dst_r,$shot_name);  
111.         return $shot_name;  
112.     }  
113.     /** 
114.      * 生成png格式的图片 
115.      *  
116.      */  
117.     private function generate_png()  
118.     {  
119.         $shot_name = $this->get_shot_name();  
120.         $img_r = imagecreatefrompng($this->filename);  
121.         $dst_r = ImageCreateTrueColor($this->width, $this->height);  
122.   
123.         imagecopyresampled($dst_r,$img_r,0,0,$this->x,$this->y,  
124.         $this->width,$this->height,$this->x1,$this->y1);  
125.         imagepng($dst_r,$shot_name);  
126.         return $shot_name;  
127.     }  
128. }       </span>  

接收到前台的坐标信息后，你可以实例化该类，用来生成图片，