<img src="demo_files/flowers.gif" id="demoImage"/>

$(
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" />

$(
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] //初始化選中區域
}
);
}
);

var api = $.Jcrop("#demoImage");
api.disable(); //設置為禁用裁剪效果
api.enable(); //設置為啟用裁剪效果
api.setOptions({allowResize:false});//設置相應配置
api.setSelect([0,0,100,100]); //設置選中區域