简易裁切头像

/*上传头像页面*/
.ucen_por {
	margin: 0px 20px;
	min-height: 600px;
	padding: 20px 0px;
}
.ucen_por div.divfl {
	width: 60%;
	border-right: solid 1px #e9eaec;
	padding-right: 2%;
	padding-bottom: 0px;
}
.ucen_por div.divfl .up_img {
	border: solid 1px #e9eaec;
	background: #f9f9f9;
	position: relative;
	z-index: 2;
	left: 0;
	top: 0;
	zoom: 1;
	height: 400px;
	margin-bottom: 15px;
	overflow: hidden;
}
.ucen_por div.divfl .up_img .upload {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	zoom: 1;
	display: none;
	line-height: 400px;
	width: 100%;
	height: 100%;
	color: #aaa;
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
	opacity: 0.6;
	filter: alpha(opacity=60);
	font-size: 60px;
	text-align: center;
}
.ucen_por div.divfl p.col999 {
	height: 35px;
	line-height: 35px;
}
.ucen_por div.divfl .jcrop-holder {
	display: block;
	margin: auto;
}
.ucen_por div.divfr {
	width: 36%;
}
.ucen_por div.divfr .divtop {
	line-height: 26px;
}
.ucen_por div.divfr .img img {
	width: 120px;
}
.ucen_por div.divfr .img {
	line-height: 26px;
	padding-top: 5px;
}
.ucen_por .ucen_button02, .ucen_por .ucen_button01 {
	height: 32px;
	line-height: 32px;
	cursor: pointer;
}
.ucen_por .webuploader-pick {
	background: #aaa;
	padding: 9px 30px;
}
.ucen_por .webuploader-pick-hover {
	background: #999;
}
.ucen_por #cropbox {
	display: none;
}
.ucen_button01, .ucen_button02, .ucen_button03, .ucen_button04 {
	display: inline-block;
	border-radius: 3px;
	border: 0px;
	cursor: pointer;
	position: relative;
	z-index: 2;
	left: 0px;
	top: 0px;
	zoom: 1;
	background: #4baa3e;
	color: #fff;
	font-size: 14px;
	height: 45px;
	line-height: 45px;
	padding: 0px 30px;
}
.ucen_button01:hover, .ucen_button02:hover, .ucen_button03:hover, .ucen_button04:hover {
	background: #3b962f;
	color: #fff;
}

<div class="ucen_cent ucen_por">
  <form action="{:U('User/avatar')}" method="POST" onsubmit="return checkCoords();">
    <div class="divfl fl">
      <div id="avatarUpload">选择图片</div>       
      <p class="col999">仅支持JPG、GIF、PNG、JPEG、BMP格式，文件不大于2MB</p>               
      <div class="up_img">
        <div class="upload f_24">50%</div>
        <img src="" id="cropbox" />
        <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" />
        <input type="hidden" id="nw" name="nw" />
        <input type="hidden" id="nh" name="nh" />
        <input type="hidden" id="imgSrc" name="imgSrc" />
      </div>
    </div>
    <div class="divfr fr f_12 col999">
      <div class="divtop">
        <b class="f_12 col666">效果预览</b><br />
        你上传的图片会自动生成1种尺寸，请注意小尺寸的头像是否清晰
      </div>
      <div class="img">
        <p class="img"><img src="<if condition="$userinfo['userpic']">{$userinfo.userpic}<else />{$config_siteurl}statics/images/userpic.jpg</if>" widht="120"></p>
        200*200
      </div>
    </div>
    <div class="ov_h"></div>
    <input type="submit" class="ucen_button01" value="保存头像" class="" />
  </form>
</div>
<link href="js/Jcrop/jquery.Jcrop.min.css" rel="stylesheet" type="text/css">
<link href="js/webuploader/webuploader.css" rel="stylesheet" type="text/css">
<script src="js/Jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="js/webuploader/webuploader.min.js" type="text/javascript"></script>
<script type="text/javascript">
//图片裁剪
  var jcrop_api;
  function cropAvatar(e, o) {
    var e = e > 200 ? 200 : e;
    $('#cropbox').Jcrop({
      aspectRatio: 1,
      minSize: [e, e],
      maxSize: [360, 360],
      onSelect: updateCoords
    }, function() {
      $('#x').val((o.width() - e) / 2);
      $('#y').val((o.height() - e) / 2);
      $('#w').val(e);
      $('#h').val(e);
      jcrop_api = this;
      jcrop_api.animateTo([(o.width() - e) / 2, (o.height() - e) / 2, e, e]);
    });
  }
  function updateCoords(c) {
    console.log(c);
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };
  function checkCoords() {
    if (parseInt($('#w').val())) return true;
    layer.msg("请拖动选区截取头像。", {
      icon: 2
    });
    return false;
  };
  //图上传
  var uploader = WebUploader.create({
    auto: true,
    pick: {
      id: "#avatarUpload",
      multiple: false,
    },
    accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/gif,image/jpeg,image/png,image/jpg,image/bmp'
    },
    swf: "{$model_extresdir}js/webuploader/uploader.swf",
    server: "{:U('User/avatarupload')}",
    fileNumLimit: 300,
    fileSizeLimit: 5 * 1024 * 1024,
    fileSingleSizeLimit: 2 * 1024 * 1024,
  });
  uploader.on("error", function(type) {
    //仅支持JPG、GIF、PNG、JPEG、BMP格式，
    if (type == 'F_EXCEED_SIZE') {
      layer.msg("上传的图片不大于2MB", {
        icon: 2
      });
    } else if (type == "Q_TYPE_DENIED") {
      layer.msg("请上传JPG、GIF、PNG、JPEG、BMP格式", {
        icon: 2
      });
    } else {
      layer.msg("服务器繁忙请稍候再试", {
        icon: 2
      });
    }
  });
  uploader.on("uploadProgress", function(file, percentage) {
    var re = /([0-9]+\.[0-9]{2})[0-9]*/;
    aNew = parseFloat(percentage * 100).toFixed(0);
    $(".upload").show().html(aNew + "%");
    if (percentage == 1) {
      $(".upload").hide();
    }
  });
  uploader.on('uploadSuccess', function(file, response) {
    uploader.removeFile(file);
    if (jcrop_api) {
      jcrop_api.destroy();
    }
    if (response.status == 1) {
      $(".upload").show().html('<img src="{$model_extresdir}js/layer/theme/default/loading-1.gif" />');
      $('#imgSrc').val(response.fileurl);
      var _this = $('#cropbox');
      _this.removeAttr("style");
      _this.attr("src", response.fileurl + '?t=' + Math.random()).on('load',function() {
        $(".upload").hide();
        var data = $(this).width() >= $(this).height() ? "w" : "h",
          w = 0,
          h = 0;
        if (data == "w") {
          w = $(this).width() >= 480 ? 460 : $(this).width();
          $(this).css({
            width: w + "px"
          });
          h = $(this).height() >= 400 ? 380 : $(this).height();
          if ($(this).height() >= 400) {
            $(this).css({
              height: h + "px",
              width: "auto"
            });
          }
          cropAvatar($(this).height(), _this);
        } else {
          h = $(this).height() >= 400 ? 380 : $(this).height();
          $(this).css({
            height: h + "px"
          });
          w = $(this).width() >= 480 ? 360 : $(this).width();
          if ($(this).width() >= 480) {
            $(this).css({
              width: w + "px",
              height: "auto"
            });
          }
          cropAvatar($(this).width(), _this);
        }
        $("#nw").val(_this.width());
        $("#nh").val(_this.height());
        var j_this = $(".jcrop-holder"),
          j_top = j_this.height() >= 380 ? (400 - j_this.height()) / 2 : (400 - j_this.height()) / 2 + "px";
        $(".jcrop-holder").css("top", j_top);
      });
    } else {
      $('#cropbox').attr("src", '').removeAttr("style");
      layer.msg(response.message, {
        icon: 2
      });
    }
  });
</script>

public function avatar(){
    if($_POST){
        $post = I('post.');
        $rule=array($post['nw'],$post['nh'],$post['x'],$post['y'],$post['w'],$post['h']);
        //print_r($rule);
        $imgsrc=$this->image_crop($post['imgSrc'],$rule,'1');
        $data['userpic']=$imgsrc;
        $return=M('Users')->where("userid='".$userid."'")->save($data);
        //echo M()->getlastsql();exit;
        if (!empty($return)) {
            $this->success('上传成功！',U('User/profile'));
        } else {
            $this->error('上传失败！');
        }
    }else{
        $this->display();
    }
}
public function avatarupload(){
    $config = array(
        'mimes'         =>  array(), //允许上传的文件MiMe类型
        'maxSize'       =>  0, //上传的文件大小限制 (0-不做限制)
        'exts'          =>  array('jpg', 'gif', 'png', 'jpeg'), //允许上传的文件后缀
        'autoSub'       =>  true, //自动子目录保存文件
        'subName'       =>  array('date', 'Y-m-d'), //子目录创建方式，[0]-函数名，[1]-参数，多个参数使用数组
        'rootPath'      =>  './d/file/avatar/', //保存根路径
        'savePath'      =>  '',//保存路径
    );
    $upload = new \Think\Upload($config);// 实例化上传类
    $info   =   $upload->upload();
    if(empty($info['file'])) {
        $this->error($upload->getError());// 上传错误提示错误信息
    }else{// 上传成功
        foreach ($info as $v){
            $imglist.="./d/file/avatar/".$v['savepath'].$v['savename'];
        }
        $data=array(
            'status'=>1,
            'fileurl'=>$imglist,
        );
        $this->ajaxReturn($data,'json');
    }
}
/*
功能：裁剪图片
参数：$path —— 图片路径（相对路径）
$rule —— 裁剪规则，内容为裁剪的大小以及开始裁剪的位置。如："400,400,100,100"，表示从坐标为（100,100）开始裁剪400*400（宽*高）大小的图片
$status —— 是否删除原图 值为1表示删除
返回：返回裁剪后的图片路径
*/
private function image_crop($path,$rule,$status = "0") {
    // 实例化图片
    $image = new \Think\Image();
    // 打开图片
    $image->open($path);
    // 判断剪切图片后的保存路径是否存在
    $savepath = "./d/file/avatar/";
    if(!is_dir($savepath)) {
        mkdir($savepath);
    }
    // 获取图片类型
    $type = $image->type();
    // 进行图片裁剪
    // Array ( [0] => 460 [1] => 383 [2] => 130 [3] => 91.5 [4] => 200 [5] => 200 ) 
    $image->thumb($rule[0],$rule[1])->save($path);
    $image->crop($rule[4],$rule[5],$rule[2],$rule[3])->save($path);
    return $path;
}