Jcrop是一个功能强大的图像裁剪引擎

Jcrop是一个功能强大的图像裁剪引擎jQuery的。

它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性（或编码，测试和调试的星期）。Jcrop还设有干净，组织良好的代码，在大多数现代的web浏览器效果很好。

在你需要加载必要文件的页面 这包括：
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子：

效果图：

jcrop简单的事件处理Demo:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>













   

    
    	

			X1 
			Y1 
			X2 
			Y2 
			W 
			H 
		
    

效果图：

jcrop实例演示Demo3：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>













   

    
    	

			X1 
			Y1 
			X2 
			Y2 
			W 
			H 
		
    

效果图：

Jcrop实例Demo4:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

















   

    
   

    

      
    
  

效果图:

注意：有关这些选项的对象的格式的几件事情：
文本值必须加引号（如'红'，'＃CCC“，”RGB（10,10,10）'）
数值，包括小数点，不应该被引用。
setSelect带有一个数组，这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项

jQuery(function(){
});
全写为
jQuery(document).ready(function(){
});

3.常用选项设置
aspectRatio:选中区域按宽/高比，为1表示正方形。
minSize:最小的宽，高值。
maxSize:最大的宽，高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。

        $( function() {                
                $("#demoImage").Jcrop({
                            aspectRatio: 1,             //选中区域宽高比为1，即选中区域为正方形     
                            bgColor:"#ccc",             //裁剪时背景颜色设为灰色
                            bgOpacity:0.1,              //透明度设为0.1
                            allowResize:false,          //不允许改变选中区域的大小
                            setSelect:[0,0,100,100]     //初始化选中区域
                      }
                 );        
            }
        );

4.api用法

varapi=$.Jcrop("#demoImage");
api.disable();//设置为禁用裁剪效果
api.enable();//设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]);//设置选中区域

$( function() {
                //事件处理
                $("#demoImage").Jcrop(
                {
                    onChange:showCoords,    //当选择区域变化的时候，执行对应的回调函数
                    onSelect:showCoords     //当选中区域的时候，执行对应的回调函数
                }
                );
            }
        );
            function showCoords(c) {
                $("#txtX1").val(c.x);       //得到选中区域左上角横坐标
                $("#txtY1").val(c.y);       //得到选中区域左上角纵坐标
                $("#txtX2").val(c.x2);      //得到选中区域右下角横坐标
                $("#txtY2").val(c.y2);      //得到选中区域右下角纵坐标
                $("#txtWidth").val(c.w);    //得到选中区域的宽度
                $("#txtHeight").val(c.h);   //得到选中区域的高度
            }