jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

jquery使用Jcrop插件轻松实现上传图片后选取区域做头像

一般网站上传头像部分会比较麻烦，如果完全程序控制的话，程序把上传的图片自动裁切成指定大小的头像的话，很有可能会破坏头像的整体美观。所以现在大多数web2.0网站都有用js或flash来实现头像的上传与选取！

现在用jquery加上jcrop插件的话，就可以非常简单的实现这些功能！如果再加上编写的一些ajax处理部分的话就基本上可以满足一般web2.0的使用要求了

 aaaa1.jpg

aaaa2.jpg

PHP代码
  1. <?php  
  2. if($_GET[‘act’]==‘saveThumb’){  
  3.     $targ_w = $targ_h = 150;  
  4.     $jpeg_quality = 100;  
  5.   
  6.     $src = $_POST[‘bigImage’];  
  7.     $img_r = imagecreatefromjpeg($src);  
  8.     $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );  
  9.   
  10.     imagecopyresampled($dst_r,$img_r,0,0,$_POST[‘x’],$_POST[‘y’],$targ_w,$targ_h,$_POST[‘w’],$_POST[‘h’]);  
  11.   
  12.     header(‘Content-type: image/jpeg’);  
  13.     imagejpeg($dst_r,null,$jpeg_quality);  
  14.       
  15.     exit;  
  16. }  
  17. ?>  
  18. <html>  
  19.     <head>  
  20.   
  21.         <script src="jquery.pack.js"></script>  
  22.         <script src="jquery.Jcrop.pack.js"></script>  
  23.           
  24.         <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />  
  25.           
  26.         <script language="Javascript">  
  27.   
  28.             $(function(){  
  29.   
  30.                   
  31.             });  
  32.               
  33.             function goss(){  
  34.   
  35.                 jQuery(‘#cropbox’).Jcrop({  
  36.                     onChange: showPreview,  
  37.                     onSelect: showPreview,  
  38.                     onSelect: updateCoords,  
  39.                     aspectRatio: 1  
  40.                 });  
  41.   
  42.             }  
  43.   
  44.             function updateCoords(c)  
  45.             {  
  46.                 $(‘#x’).val(c.x);  
  47.                 $(‘#y’).val(c.y);  
  48.                 $(‘#w’).val(c.w);  
  49.                 $(‘#h’).val(c.h);  
  50.             };  
  51.   
  52.             function checkCoords()  
  53.             {  
  54.                 if ($(‘#x’).val()==”){  
  55.                     alert(‘请先上传头像然后选择裁切头像最后进行保存！’);  
  56.                     return false;  
  57.                 }  
  58.             };  
  59.               
  60.             function showPreview(coords)  
  61.             {  
  62.                 var rx = 150 / coords.w;  
  63.                 var ry = 150 / coords.h;  
  64.                 var w2=$("#bigwidth").val();  
  65.                 var h2=$("#bigheight").val();  
  66.                 jQuery(‘#preview’).css({  
  67.                     width: Math.round(rx * w2) + ‘px’,  
  68.                     height: Math.round(ry * h2) + ‘px’,  
  69.                     marginLeft: ‘-‘ + Math.round(rx * coords.x) + ‘px’,  
  70.                     marginTop: ‘-‘ + Math.round(ry * coords.y) + ‘px’  
  71.                 });  
  72.             }  
  73.   
  74.         </script>  
  75.   
  76.     </head>  
  77.   
  78.     <body>  
  79. <?php  
  80. if($_GET[‘act’]==‘upload’){  
  81.     if($_POST[‘upload’]==‘upload’){  
  82.           
  83.         $uploaddir =‘upload/’;  
  84.         $uploadfile = $uploaddir . basename($_FILES[‘file’][‘name’]);  
  85.         //print_r($_FILES[‘file’]);  
  86.         //echo $uploadfile;  
  87.       
  88.         if (move_uploaded_file($_FILES[‘file’][‘tmp_name’], $uploadfile)) {  
  89.             list($w, $h, $type, $attr)=getimagesize($uploadfile);  
  90.             $str=”;  
  91.             if($w>550){  
  92.                 $str="width:550px;";  
  93.             }  
  94.             if($h>550){  
  95.                 $str.="  height:550px;";  
  96.             }  
  97.             $str=emptyempty($str)?”:"style=’ ".$str." ‘";  
  98.             $f1="<img src=’$uploadfile’ border=0 $str id=’cropbox’ >";  
  99.             $f2="<img src=’$uploadfile’ border=0  $str id=’preview’ >";  
  100.   
  101.               
  102.               
  103.             echo ‘<script language="javascript">parent.$("#showBig").html("’.$f1.‘");parent.$("#showThumb").html("’.$f2.‘");parent.goss();parent.$("#bigwidth").val("’.$w.‘");parent.$("#bigheight").val("’.$h.‘");parent.$("#bigImage").val("’.$uploadfile.‘");</script>’;  
  104.                   
  105.         }else {  
  106.             echo "<script>alert(‘文件上传失败!’);</script>";  
  107.         }  
  108.           
  109.     }  
  110. ?>  
  111.   
  112. <div style="margin:0px;font-size:12px;">  
  113. <FORM ACTION="?act=upload" METHOD=POST enctype="multipart/form-data">  
  114.   
  115.     <input type="file" name="file" id="file" />  
  116.   
  117.   <input type="submit" name="button" id="button" value="提交" />  
  118.   
  119.   <input name="upload" type="hidden" id="upload" value="upload" /><input type="hidden" name="MAX_FILE_SIZE" value="3000000" />  
  120. </FORM>  
  121. </div>  
  122.   
  123.   <?php  
  124.   exit;  
  125. }  
  126. ?>  
  127.   
  128.   
  129. <div id="showBig" style="width:500px;height:500px;border:2px solid #E6E0CE;padding:3px;"></div>  
  130. <iframe style="width:500px;height:60px;padding:0px;" src="?act=upload"></iframe>  
  131.   
  132.   
  133. <div id="showThumb" style="width:152px;height:152px;border:1px solid #cccccc;padding:1px; overflow: hidden;"></div>  
  134. <div style="margin-top:20px;">  
  135.     <form action="?act=saveThumb" method="post" onsubmit="return checkCoords();">  
  136.         <input type="hidden" id="bigImage" name="bigImage" />  
  137.         <input type="hidden" id="bigwidth" name="bigwidth" />  
  138.         <input type="hidden" id="bigheight" name="bigheight" />  
  139.         <input type="hidden" id="x" name="x" />  
  140.         <input type="hidden" id="y" name="y" />  
  141.         <input type="hidden" id="w" name="w" />  
  142.         <input type="hidden" id="h" name="h" />  
  143.         <input type="submit" value="保存用户头像" />  
  144.     </form>  
  145. </div>  
  146.     </body>  
  147.   
  148. </html>  

 

 

jcrop.zip

《jquery使用Jcrop插件轻松实现上传图片后选取区域做头像》有6个想法

  3. zhanghu

    您好,

    很荣幸看到您的blog 特别是这篇文章,于是根据您的代码学习.
    但由于刚刚接触php不久,有一些地方不是很明白,不知道您有时间可以解答下吗? 以一颗真诚的求学的心向您请教,希望能等到您的解答邮件

    当我用imagejpeg($dst_r,$src,$jpeg_quality); 替代imagejpeg($dst_r,null,$jpeg_quality); 之后,

    缩略图保存到了指定的文件夹,但是在新弹出的页面中以照片的形式显示http://localhost/thumb/thumb.php?act=saveThumb

    这是什么原因呢?看了很久代码也查阅了很多手册,还是不明白.如何在保存完照片后不要跳转到此页面的呢?

    1. xzy 文章作者

      注意php输出的header，然后不要输出图片就行了，直接输入一段文字，说保存成功不就得了“

  4. 我

    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in D:\PHPnow\htdocs\userpic.php on line 140

    对应的代码，请问怎么回事啊
    echo “”.parent.$(“#showBig”).html(“’.$f1.‘”);parent.$(“#showThumb”).html(“’.$f2.‘”);parent.goss();parent.$(“#bigwidth”).val(“’.$w.‘”);parent.$(“#bigheight”).val(“’.$h.‘”);parent.$(“#bigImage”).val(“’.$uploadfile.‘”).””;

评论已关闭。