使用jcrop实现裁切图片

jcrop为基于jquery库实现的图片裁切插件。当使用该插件使需要引入jquery和jcrop（包括js文件和css文件）。

 //css文件的引入
 <link rel="stylesheet" type="text/css" href="/Jcrop/css/jquery.Jcrop.min.css">
 //js文件的引入
 <script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript" src="/Jcrop/js/jquery.Jcrop.js"></script>

在项目中，需要实现当点击上传图片时，出现弹出框对上传的图片进行裁切，裁切完成后。点击提交按钮，改变用户的头像。

实现的过程如下：

1. 点击上传图片按钮，触发ajax请求，将图片上传。上传成功后，触发ajax的回调函数，出现弹出框。
2. 在弹出框中显示要上传的图片，并且将该图片作为jcrop的实例，对图像进行裁切，同时显示裁切图片的预览图
3. 点击提交按钮，将jcrop的处理结果作为参数，提交请求。其中jcrop的参数包括相对于原图像的裁切的起点坐标以及裁切的宽度。
4. 后台处理上传的图片和图片的裁切

前端代码如下

EventUtil.addHandler(userImgUpload, "change", function(e){

    var e = EventUtil.getEvent(e);
    //上传图片 当上传成功后  触发弹出框
    var formd = new FormData();
        formd.append("file",this.files[0]);
        ajax("post","userSet/imgupload", null, formd, function(res){
            var str = "<div class='img-wrap'><div class='upload-origin'><img id='upload-img' src="+JSON.parse(res).img+"></img></div><div class='pre-img'><span id='pre-big'><img id='crop-pre-big' src="
                            +JSON.parse(res).img+"></span><span id='pre-middle'><img id='crop-pre-middle' src="+JSON.parse(res).img+"></span><span id='pre-small'><img id='crop-pre-small' src="+JSON.parse(res).img+
                            &