Jcrop 图像剪裁

var  uploadW=0,//剪裁源图片的宽
      uploadH=0,//剪裁源图片的高

      previewdivW = 224,//剪裁预览div的宽

      previewdivH = 224;//剪裁预览div的高

 

 $.jUploader({
          button: 'upload-button', // 这里设置按钮id
          action: '/IUploadControll/uploadface', // 这里设置上传处理接口，这个加了参数test_cancel=1来测试取消
      
          // 上传完成事件
          onComplete: function (fileName, response) {
              // response是json对象，格式可以按自己的意愿来定义，例子为： { success: true, fileUrl:'' }
              if (response.success) {
                  $('#cropbox').attr('src', response.fileUrl);
                  $('#preview').attr('src', response.fileUrl);
                  $("#crop_filename").val(response.fileName);
         $('#cropbox').Jcrop({//初始化剪裁 图片
          onChange: showPreview,
          onSelect: showPreview,
          onSelect: updateCoords,
          maxSize:[previewdivW,previewdivH],
          aspectRatio: 1
         });
                  // 这里说明一下，一般还会在图片附近加添一个hidden的input来存放这个上传后的文件路径(response.fileUrl)，方便提交到服务器保存
              } else {
                  alert('上传失败');
              }
          }
      });

   })
   
   function showPreview(coords)
   {
    uploadW =  $('#cropbox').attr('width');
             uploadH = $('#cropbox').attr('height');
    if (parseInt(coords.w) > 0)
    {
     var rx = previewdivW / coords.w;
     var ry = previewdivH / coords.h;

     $('#preview').css({
      width: Math.round(rx * uploadW) + 'px',
      height: Math.round(ry * uploadH) + 'px',
      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
      marginTop: '-' + Math.round(ry * coords.y) + 'px'
     });
    }
   }
   
   function updateCoords(coords)
      {
          $('#x').val(coords.x);
          $('#y').val(coords.y);
          $('#w').val(coords.w);
          $('#h').val(coords.h);
      };
   
   function crop(){
    if($("#crop_filename").val() == ''){
     $.showTip('请上传图片后再剪裁',3);return;
    }
    
    if($("#x").val()==0 || $("#y").val()==0 || $("#h").val()==0 || $("#w").val()==0){
     $.showTip('请剪裁图片后再点击剪裁按钮',3);return;
    }
    
    var t = Date.parse(new Date());
    var x = $("#x").val();
    var y = $("#y").val();
    var h = 278;//将剪裁的高度固定为278
    var w = $("#w").val();
    var file = $("#crop_filename").val();
    
    $param = "x="+x+"&y="+y+"&h="+h+"&w="+w+"&crop_filename="+file+"&t="+t;
    
    $.req('/IUploadControll/facecrop',$param,"POST",function(data){
     
    },"html",true);
    
   }

 

HTML:

 

<!--剪裁图像 参数START-->
  <div style="display:none">
   <input type="hidden" value="" name="crop_filename" id="crop_filename" />
   <input type="hidden" value="0" name="x" id="x" />
   <input type="hidden" value="0" name="y" id="y" />
   <input type="hidden" value="0" name="w" id="w" />
   <input type="hidden" value="0" name="h" id="h" />
  </div> 
  <!--剪裁图像 参数END-->
  <div class="reg_box">

 

<div class="facepreview"><img src="<!@{$face}@>"  id="preview" ></div>
      <div>
       <div class="facereadme">
       头像仅支持'jpg', 'png', 'gif'三种格式,文件小于1M,分辨率小于350*400
       </div>
       <div id="upload-button" style="float:left">
        <span></span>
       </div>
       <div style="float:left">
       <input type="button" value="剪裁" class="cropbutton" onclick="crop()">
       </div>
      </div>