官方站點http://deepliquid.com/content/Jcrop.html 。下載了最新版的壓縮包，壓縮包中包括了Jcrop的幾個demo文件，關鍵的Jcrop.js文件和jQuery.Jcrop.css文件。 基本上來說參照它的幾個demo文件就可以學會使用這個插件了。晚上正好學習研究了下，現簡單總結如下：
使用插件必須條件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。?
1.最基本使用方法?
$(?
function()?
{?
$("#demoImage").Jcrop();?
}?
);?
2.得到選中區域的坐標以及回調函數?
$(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]); //設置選中區域?

總結

以上是生活随笔為你收集整理的jcrop 用法小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。