PHP结合JQueryJcrop实现头像图片裁切实例代码

看到一些网站上有图片剪切的功能，觉得挺炫，后来找了一款专用于图片裁切的插件，jquery.jcrop.min.js，用这个插件可以方便的实现这个功能，使用时鼠标在图片上圈选出选区，即可把图片裁切成所选部分，非常适合用于头像的裁切编辑功能。前端ui分享

演示分为HTML和php两部分：

第一部分，HTML代码：

.代码  

1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2.   
3.   
4.   
5. <script></script>  
6. <script></script>  
7.   
9. #preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}  
10. #imghead{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
11.   
12. <script> </script>
13. jQuery(function(){  
14.  jQuery('#imghead').Jcrop({  
15.   aspectRatio: 1,  
16.   onSelect: updateCoords, //选中区域时执行对应的回调函数  
17.   onChange: updateCoords, //选择区域变化时执行对应的回调函数  
18.  });  
19. });  
20. function updateCoords(c)  
21. {  
22.  jQuery('#x').val(c.x); //选中区域左上角横  
23.  jQuery('#y').val(c.y); //选中区域左上角纵坐标  
24.  //jQuery("#x2").val(c.x2); //选中区域右下角横坐标  
25.  //jQuery("#y2").val(c.y2); //选中区域右下角纵坐标  
26.  jQuery('#w').val(c.w); //选中区域的宽度  
27.  jQuery('#h').val(c.h); //选中区域的高度  
28. };  
29. function checkCoords()  
30. {  
31.  if (parseInt(jQuery('#w').val())>0) return true;  
32.  alert('请选择需要裁切的图片区域.');  
33.  return false;  
34. };  
35.   
36.   
37.   
38.   
39.   
40.    
41.    
42.    
43.    
44.    
45.   
46.   
47.   

 

第二部分：PHP处理部分：jquery分享

.代码  

2. if ($_SERVER['REQUEST_METHOD'] == 'POST')  
3. {  
4.  $targ_w = $targ_h = 150;  
5.  $jpeg_quality = 90;  
6.  $src = '../image/b4.jpg';  
7.  $img_r = imagecreatefromjpeg($src);  
8.  $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );  
9.  imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],  
10.  $targ_w,$targ_h,$_POST['w'],$_POST['h']);  
11.  header('Content-type: image/jpeg');  
12.  imagejpeg($dst_r,null,$jpeg_quality);  
13.  exit;  
14. }  
15. ?>  

 

请将上述两部分代码分别另存为两个文件，文件名自拟。

php免费学习视频：立即学习
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！