Jcrop点击上传图片并裁剪

<link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css"/>

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.Jcrop.js" type="text/javascript" charset="utf-8"></script>

<div id="userPhoto" class="userPhoto">
	<div class="headPhoto">
		<input type='hidden' id='userPic' />
		<input type="file" class="fileInp" id="userPhotoPicker" value="" accept="image/*" οnchange="picsubmit(this)"/>
		<div id='userPhotoPreview' class="mt10">
		    <img src="img/mrhead.png" id="userImg"/>
	        </div>
	input name="logo" type="hidden" value="" id="logo"> 
	</div>							          	   
</div>

<div class="container" id="userPhotoCut" style="display:none;width: 750px;">
	<div class="row">
		<div class="span12">
		<div class="jc-demo-box">
		<div id="img-src" style="text-align:center;max-width:500px;height:auto;">
			 <p>裁剪区域</p>
		</div>
		<div id="userPhotoCutBox" style="position:relative;height:500px;">
			 <div id="cutArea"></div><p></p>
		 </div>
			<input type="hidden" id="x" name="x" class="photo-size" />
			<input type="hidden" id="y" name="y" class="photo-size" />
			<input type="hidden" id="w" name="w" class="photo-size" />
			<input type="hidden" id="h" name="h" class="photo-size" />
			<input type="hidden" id="photoSrc" name="photoSrc" value="">
		<div id="c-btn">
			<input type="button" value="保存" class="cut-btn" οnclick="checkCoords()">
			<input type="button" value="返回" class="cut-btn" οnclick="returnPhotoPage()">
		</div>
		<div class="wst-clear"></div>
			</div>
			</div>
		</div>
		</div>

<script>

//建立一個可存取到該file的url
function getObjectURL(file) {
	var url = null ;
	if (window.createObjectURL!=undefined) { // basic
	url = window.createObjectURL(file) ;
	} else if (window.URL!=undefined) { // mozilla(firefox)
	url = window.URL.createObjectURL(file) ;
	} else if (window.webkitURL!=undefined) { // webkit or chrome
	url = window.webkitURL.createObjectURL(file) ;
	}
	return url ;
}




function picsubmit(obj){
	var uploadPhotoSrc;
	$('#userPhotoCut').show();
  	$('#userPhoto').hide(); 
	var objUrl = getObjectURL(obj.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
	if (objUrl) {
		uploadPhotoSrc=objUrl; //将图片路径存入src中，显示出图片
	}
	var cutCode = '<img src="'+uploadPhotoSrc+'" id="target" alt="" style="max-width:500;height:auto;" />';
	cutCode += '<div id="preview-pane">';
	cutCode += '<div><p align="center">裁剪预览</p>';
	cutCode += '<div class="cut-help"><h4>操作帮助</h4>'
	cutCode += '<p>请在裁剪区域放大缩小及移动选取框，选择要裁剪的范围，裁切宽高比例固定；裁切后的效果为右侧预览图所显示；保存提交后生效。</p></div></div>'
	cutCode += '<div class="preview-container"><img src="'+uploadPhotoSrc+'"  class="jcrop-preview"  alt="Preview" /></div></div>';
	$('#userPhotoCutBox>p').html(cutCode);
	$('#photoSrc').val(uploadPhotoSrc);
	$('#userPic').val(uploadPhotoSrc);
	//初始化jcrop
	jcropInit();
	$('#uploadMsg').empty().hide();
}


var userPic;
function checkCoords()
{
  //判断是否有裁剪
  if (parseInt($('#w').val())){
    /*获取裁剪数据*/
    var photoData = {};
    photoData.x = $('#x').val();
    photoData.y = $('#y').val();
    photoData.w = $('#w').val();
    photoData.h = $('#h').val();
    photoData.photoSrc = $('#photoSrc').val(); 
    $.post('Home/users/editPhoto',photoData,function(data, textStatus){
      if(data.status==1)
      {
          //将上传的图片路径赋给全局变量
	        userPic = data.data;
	        $('#userPhotoPreview').html('<img id="userImg" class="ipt" src="'+window.conf.DEFAULT_URL+userPic+'?='+Math.random()+'"  />');
	        $("#logo").val(userPic);
	        $('#userPhotoCut').hide();
	        $('#userPhoto').css({'display':'inline-block'});
      }else{
        console.log(data.msg);
        return false;
      }
    });
    return true;
  }
  alert('请对图片裁剪后再进行提交');
  return false;
}




//返回
function returnPhotoPage(){
  $('#userPhotoCut').hide();
  $('#userPhoto').css({'display':'inline-block'});
}
var jcrop_api;
function jcropInit(){
    var boundx,
        boundy,


        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),


        xsize = $pcnt.width(),
        ysize = $pcnt.height();


    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      boxWidth:500,  //jcrop加上这个属性图片尺寸再大也不会溢出了
      boxHeight:500,  //jcrop加上这个属性图片尺寸再大也不会溢出了
      aspectRatio: 1,
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();  //获取图片实际尺寸
      boundx = bounds[0];
      boundy = bounds[1];
      //设置宽度以使文字居中
      $('#img-src').css('width',boundx+'px');


      // Store the API in the jcrop_api variable
      jcrop_api = this;
      jcrop_api.setSelect([0,0,150,150]);


      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });


    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;


        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
        //设置裁剪的图片数据
      $('#x').val(c.x);
      $('#y').val(c.y);
      $('#w').val(c.w);
      $('#h').val(c.h);
    };
}
//资料保存
function dataSave(){
	var headlogo=$("#logo").val();
	var sellerName=$("#sellerName").val();
	var sellerEmail=$("#sellerEmail").val();
	var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
	if(headlogo==''){
		showTip('请先上传头像');
		return false;
	}else if(sellerName=''){
		showTip('请输入联系人姓名');
		return false;
	}else if(sellerEmail=''){
		showTip('请输入邮箱');
		return false;
	}else if(!myreg.test(sellerEmail)){
		showTip('邮箱格式不正确');
		return false;
	}else{
		$("#headform").submit();
	}
}

</script>