jcrop实现图片区域选择、裁剪及上传

首先说明需要引入哪些文件：

jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js

其次说明需要哪些页面：

前端：

1.显示图片以及选择区域的页面resume_avatar.html, 部分代码如下：

1.1图片显示

  <div id="imgPreview" style="max-width:400px;min-height:200px;">
     <img   src="demo.jpg"  id="target" alt="头像预览" style="width:100%;"  class="target" />
  </div>

  <div id="preview-pane">
    <div class="preview-container" >
      <img   src="demo.jpg"  class="jcrop-preview" alt="头像预览" />
    </div>
  </div>

1.2图片的更换

html代码

          <form action="{:U('Index/do_resume_avatar')}" method="post" model-node='account_save' enctype='multipart/form-data' id="form1">
            <dl class="form-set">
              <dd>
                <div class="form-tt"><h5>上传头像:</h5></div>             
                <div class="form-row"><input type="file" name="pic" id="pic" onchange="picsubmit()"/></div>               
              </dd>
            </dl>    
         </form>

js代码

function picsubmit(){
  //var y=document.getElementById(pic).value;
  $("#form1").submit();
}

1.3图片选择完成后，点击确定

html代码

                    <form action="{:U('Index/resume_avatar_done')}" method="post" enctype='multipart/form-data' id="form2">  
                        <input type="hidden" id="x" name="x" />  
                        <input type="hidden" id="y" name="y" />  
                        <input type="hidden" id="w" name="w" />  
                        <input type="hidden" id="h" name="h" />  
                        <div class="form-row" style="padding-left:130px;">
                        <button type="submit" class="btn-green-big" id="submit-avatar" onclick="cutImage()">下一步</button>  
                        </div>
                    </form>  

js代码

function cutImage(){
   var width1 = {$image_size}; //图片实际的宽度
   var width2 = $('.target').width(); //图片显示的宽度
   var kk = (width1/width2);
    

    $("#target").Jcrop( { 
            onChange : showPreview,  
            onSelect : showPreview, 
        });  

function showPreview(coords) { 
   if(kk == 1){
    $('#x').val(coords.x);  
    $('#y').val(coords.y);  
    $('#w').val(coords.w);  
    $('#h').val(coords.h);  
    }else{
    $('#x').val((coords.x)*kk);  
    $('#y').val((coords.y)*kk);  
    $('#w').val((coords.w)*kk);  
    $('#h').val((coords.h)*kk);
    }
};

}

2.图片处理完成之后跳转的页面resume_avatar_done.html

只需要显示处理完成的图片，并且显示多少秒之后跳转就可以了

html代码

 <img src="{$thumb_img}" id="target" alt="头像预览" style="max-width:400px;min-height:300px;"/>
 <div class="set-hd"><span ><h3>(头像编辑成功！将在 <span id="mes" style="color:red;">5</span> 秒钟后返回！)<h3></span></div>

js代码

<script language="javascript" type="text/javascript">
    var i = 5;
    var intervalid;
    intervalid = setInterval("fun()", 1000);
    function fun() {
    if (i == 0) {
    window.location.href = "{:U('job/Index/z_resume')}";
    clearInterval(intervalid);
    }
    document.getElementById("mes").innerHTML = i;
    i--;
    }
</script>    

后台：

1.首先是resume_avatar页面，只需要传两个参数，一个是图片的路径$resume_data,还有一个是图片的宽度$image_size；

2.再者是resume_avatar_do页面，其功能是处理图片的更换（并不处理选择完成后的图片），并且保存到数据库中，还有传参数到前端进行显示，详细代码不做赘述；

3.最后是resume_avatar_done页面，其功能是处理选择完成后的图片，并且将图片裁剪成选择区域相同大小的图片，部分代码如下：

        $a = $_POST;
        $x = $a['x'];
        $y = $a['y'];
        $w = $a['w'];
        $h = $a['h'];
  
        $path = $datas['pic'];
        $path2 = substr($path,0,strrpos($path, '.'));        
        
        //var_dump($path2);exit;
        
        //$thumb_img = "Upload_File/resume_avatar/demo_1.jpg";
        //切割图片
        //获取原图
        $img=imagecreatefromjpeg($path);
        //获取图片的宽度及高度
        $img_width=imagesx($img);
        $img_height=imagesy($img);
        //缩略图的宽度与高度
        //$new_img_width=$w;
        //$new_img_height=$h;
        //生成新图片（缩略图）
        $new_img=imagecreatetruecolor($w,$h);
        //创建新的图像对象(缩略图)
        imagecopyresized($new_img,$img,0,0,$x,$y,$w,$h,$w,$h);
        //imagecopyresized函数拷贝源图像的全部或部分并调整大小
        //生成图片
        $thumb_img = $path2.'_thumb.jpg';
        imagejpeg($new_img,$thumb_img);
        $datas['suo'] = $thumb_img;
        //销毁图像
        imagedestroy($new_img);

resume_avatar.html页面的效果图如下：