图片裁剪插件cropbox

需要js：  <script src="<%=path%>/resources/js/cropbox.js"></script> 

JavaScript代码：

<script> 
     var personPhoto = $("#personPhoto").html();
  $("#personPhoto").remove();

//点击修好头像

function changePhoto(){

    var popDialog = dialog({
        width: 750,
        height:400,
                title: '修改头像',
               content: personPhoto, 
               ok: function(){
            var imgv = $("#img").val();
        if(imgv!=""){
   $.ajax({
   url:'<%=path%>/${role}/saveImage',
   type:'POST', //GET
   async:true,    //或false,是否异步
   data:{
    blob:imgv,
    id:$("#userId").val()
   },
   dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
   success:function(data){
    if(data.msg == "success"){
                        $("#adjustImage").html('');
                        $("#adjustImage").append('<img src="'+imgv+'"  height="210px;" width="210px;">');
                        $(".tou a").find("img").prop("scr","<%=path %>/resources/images/productPersonalImages/"+data.pic);
    dialog.tipsPop('ok-pop','操作成功');
    personPic = data.pic;
                        $(".tou a").html('<img src="<%=path %>/resources/images/productPersonalImages/'+data.pic+'" width="40" height="40"/>');
    }
   }
}); 
}else{
dialog.tipsPop('ero-pop','请先裁切图片');
return false;
}  
        },
        cancel:function(){},
        onclose:function(){
        $("#img").val('');
        $("#photoForm")[0].reset();   //重置表单
        }
        });
        popDialog.showModal();
        
        var options = {
    thumbBox: '.thumbBox',
    spinner: '.spinner',
    imgSrc: '<%=path%>/resources/images/avatar.png'
    };
       
var cropper = $('.imageBox').cropbox(options);
    $('#fileField').on('change', function(){
    var picFile = document.querySelector("input[name=fileField]").files[0];
    var fileName = picFile.name;
            if(fileName.lastIndexOf('jpg') === -1 && fileName.lastIndexOf('png') === -1){
                dialog.tipsPop('ero-pop','文件格式不正确，请选择jpg或png格式');
                $("#photoForm")[0].reset();
                return false;
            }
            var fileSize = picFile.size;
            if(fileSize > 2*1024*1024){
                dialog.tipsPop('ero-pop','图片过大,请上传2M以内的图片');
                $("#photoForm")[0].reset();
                return false;
            }
    var reader = new FileReader();
    reader.onload = function(e) {
options.imgSrc = e.target.result;
cropper = $('.imageBox').cropbox(options); 
      };
     reader.readAsDataURL(this.files[0]);
      this.files = [];   
}); 
   
    $('#btnCrop').on('click', function(){
  var img = cropper.getDataURL();
  $("#img").val(img);
      $('.mt10').html(''); 
$('.mt10').append('<img src="'+img+'" align="absmiddle" style="width: 200px;height: 200px;">');
        });  
$('#btnZoomIn').on('click', function(){
cropper.zoomIn();
});
$('#btnZoomOut').on('click', function(){
cropper.zoomOut();
});
    }
</script> 

html代码：
    <div class="popup" id="personPhoto">
        <form method="post" enctype="multipart/form-data" id="photoForm">
        <div class="changePhoto">
            <div class="f_left changePhoto_l">
                <div class="changePhoto_area imageBox">
                     <div class="thumbBox"></div>
                     <div class="spinner" style="display: none"></div>
                </div>
                <div class="file_box">
                        <input type="file" accept="image/png,image/jpeg" name="fileField" class="file-field" style="display: none;" id="fileField" size="28"/>
                        <label for="fileField" class="lead" style="cursor: pointer;">上传</label>
    <input type="button" id="btnZoomOut" class="leadNew" style="cursor: pointer;" value="-" />
    <input type="button" id="btnZoomIn" class="leadNew" style="cursor: pointer;" value="+"  />
                        <input type="button" id="btnCrop"  class="leadNew" style="cursor: pointer;" value="裁切"/>
                        <!-- <input type="submit" name="submit" class="lead" value=""> -->
                </div>
            </div>
            <div class="f_right changePhoto_r">
                <p>预览</p>
                <div class="pic mt10" style="width: 200px;height: 200px;"></div>
            </div>
        </div>
        </form>
    </div>

    <input type="hidden" id="img" value=""/>

后台代码：

 @RequestMapping("/student/saveImage")
 @ResponseBody
   public Map<String,Object> saveImageBlob(String blob ,Integer id,String role,HttpServletRequest request) throws IOException{
 Map<String,Object> map = new HashMap<String, Object>();
String img = blob.replaceAll("data:image/png;base64,", "");
 
  //保存图片
    BASE64Decoder decoder = new BASE64Decoder();
    ByteArrayInputStream stream = null;
    FileOutputStream out = null;
    String path = request.getServletContext().getRealPath("/") + IMAGEPATH;
    String fileName = "";
    File f = null;
    try {
    fileName = FileUtils.createUniqueFileName(".png");
    byte[] b = decoder.decodeBuffer(img);//转码得到图片数据
    stream = new ByteArrayInputStream(b);
            String filePath = path + fileName;
            f = new File(filePath);
            out = new FileOutputStream(f);
            byte[] buffer = new byte[1024 * 1024];
            int length = 0;
            while ((length = stream.read(buffer)) != -1) {
                out.write(buffer, 0, length);
            }
        } catch (IOException e) {
        e.printStackTrace();
        } finally {
            if (stream != null) {
                try {
                    stream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (out != null) {
                try {
                    out.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
 
SysUser sysUser = new SysUser();
sysUser.setId(id);
sysUser.setPicture(f.getName());
String str = sysUserService.changeSysUserInfor(sysUser);

if (StringUtils.equals(str, ApplicationConstants.SUCCESS)) {
SysUser user = (SysUser) SecurityUtils.getSubject().getSession().getAttribute(ApplicationConstants.LOGIN_USER);
user.setPicture(sysUser.getPicture());
}
map.put("msg", str);
map.put("pic", sysUser.getPicture());
return map;
}