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

<script src="resources/jcrop/js/jquery.min.js"></script>

<script src="resources/jcrop/js/jquery.Jcrop.min.js"></script>

<img src="resources/fj.jpg" id="target" />

$('#target').Jcrop({
　　//在这里添加所需要的参数
});

　　　　 
　　$(function(){
　　　　var jcrop_api, boundx, boundy,

        // Grab some information about the preview pane

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

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

        console.log('init', [ xsize, ysize ]);

        $('#target').Jcrop({

            onChange : updatePreview,

            onSelect : updatePreview,

            aspectRatio : xsize / ysize //设为1则为正方形

        }, function() {

            // Use the API to get the real image size

            var bounds = this.getBounds();

            boundx = bounds[0];

            boundy = bounds[1];

            // Store the API in the jcrop_api variable

            jcrop_api = this;

            // Move the preview into the jcrop container for css positioning

            $preview.appendTo(jcrop_api.ui.holder);

        });

        function updatePreview(c) {

            $('#x1').val(c.x);

            $('#y1').val(c.y);

            $('#x2').val(c.x2);

            $('#y2').val(c.y2);

            $('#w').val(c.w);

            $('#h').val(c.h);

            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'

                });

            }

        }

    });

//这个函数是用来与后端交互，进行上传图片。上传图片成功后，返回图片的url
function cut() {

        $.ajax({

            type : "get",

            url : "JCropServlet?t=" + new Date(),

            data : {

                "x1" : $('#x1').val(),

                "x2" : $('#x2').val(),

                "y1" : $('#y1').val(),

                "y2" : $('#y2').val()

            },

            dataType : "text",

            success : function(data) {

                $("#result").css("display", "block");

                $("#result").attr("src", "resources/" + data);

                // location.reload();

            },

            error : function(data) {

                alert(data);

            }

        });

    }

<!-- 原图片 -->

    <img src="resources/fj.jpg" id="target" />

    <form id="coords" onSubmit="return false;" method="get" action="JCropServlet">

        <div class="inline-labels">

            <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
 　　　　　　 <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
            <label>X2<input type="text" size="4" id="x2" name="x2" /></label>
         　<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> 
           <label>W <input type="text" size="4" id="w" name="w" /></label> 
           <label>H<input type="text" size="4" id="h" name="h" />

            </label>

        </div>

        <button onclick="cut()">提交</button>

    </form>
　　//这个div是用来实时预览实时裁剪的图像

    <div id="preview-pane">

    <div class="preview-container">

      <img src="resources/fj.jpg" class="jcrop-preview" alt="Preview" />

    </div>

  </div>

    <!-- 截图后的图片 -->

    <img src="" id="result" style="display: none">

#preview-pane{

  display: block;

  position: absolute;

  z-index:;

  top: 10px;

  right: 30px;

  padding: 6px;

  border: 1px rgba(0,0,0,.4) solid;

  background-color: white;

  -webkit-border-radius: 6px;

  -moz-border-radius: 6px;

  border-radius: 6px;

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  }

  #preview-pane .preview-container {

  width: 250px;

  height: 250px;

  overflow: hidden;

  }

public class JCropServlet extends HttpServlet {

    public JCropServlet() {

        super();

    }

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {
　　　　　//获取截取图片的坐标

        int x1=Integer.parseInt(request.getParameter("x1"));

        int y1=Integer.parseInt(request.getParameter("y1"));

        int x2=Integer.parseInt(request.getParameter("x2"));

        int y2=Integer.parseInt(request.getParameter("y2"));

        //获取根路径

        String rootPath=request.getServletContext().getRealPath("/");

        String src=rootPath+File.separator+"resources"+File.separator+"fj.jpg";

        String name = "fj_crop_" + this.dateFormat() + ".jpg";

        String dest=rootPath+File.separator+"resources"+File.separator+name;

        ImageUtils.delete(rootPath+File.separator+"resources");

        ImageUtils.cut(src, dest, x1, y1, x2, y2);

        PrintWriter out=response.getWriter();
　　　　　//返回图片url

        out.print(name);

        out.close();

    }

    private String dateFormat(){

        DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");

        return df.format(new Date());

    }

}