同事推荐了jcrop这个插件，到它的官方站点http://deepliquid.com/content/jcrop.html下载了最新版的压缩包，压缩包中包括了jcrop的几个demo文件，关键的jcrop.js文件和jquery.jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下，现简单总结如下，也方便下英文不好的朋友们。
使用插件必须条件：引入jquery.js文件，引入jquery.jcrop.js文件，引入jquery.jcrop.css文件。
1.最基本使用方法
html代码部分：
复制代码 代码如下:
js部分：
复制代码 代码如下:
$(
function()
{
$(#demoimage).jcrop();
}
);
这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下：
复制代码 代码如下:
x1
y1
x2
y2
width
height
js代码部分如下： 
复制代码 代码如下:
$(
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); //得到选中区域的高度
}
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用法
复制代码 代码如下:
var api = $.jcrop(#demoimage);
api.disable(); //设置为禁用裁剪效果
api.enable(); //设置为启用裁剪效果
api.setoptions({allowresize:false});//设置相应配置
api.setselect([0,0,100,100]); //设置选中区域