<img src="demo_files/flowers.gif" id="demoImage"/> js部分： $( function() { $("#demoImage").Jcrop(); } )
<img src="demo_files/flowers.jpg" id="demoImage" />
<label>x1</label><input type="text" id="txtX1" />
<label>y1</label><input type="text" id="txtY1" />
<label>x2</label><input type="text" id="txtX2" />
<label>y2</label><input type="text" id="txtY2" />
<label>width</label><input type="text" id="txtWidth" />
<label>height</label><input type="text" id="txtHeight" />
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); //得到选中区域的高度
}
$( function() { $("#demoImage").Jcrop({ aspectRatio: 1, //选中区域宽高比为1，即选中区域为正方形 bgColor:"#ccc", //裁剪时背景颜色设为灰色 bgOpacity:0.1, //透明度设为0.1 allowResize:false, //不允许改变选中区域的大小 setSelect:[0,0,100,100] //初始化选中区域 } ); } );
原文：http://www.cnblogs.com/shilin000/p/4765734.html