基本使用方法如下：
一、在head部分(<head>和</head>之間)插入相關css和js文件。
<link rel="stylesheet" href="css/jquery.Jcrop.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.Jcrop.js"></script>
二、在head部分插入回調函數等相關處理參數。
01 |
<script
language="Javascript"> |
05 |
var jcrop_api,
boundx, boundy; |
20 |
addClass: 'jcrop-handle', |
21 |
onSelect:
updateCoords, |
25 |
var bounds
= this.getBounds(); |
31 |
function updateCoords(c) |
38 |
function checkCoords() |
40 |
if (parseInt($('#w').val())) return true; |
三、給相關圖片加上id以便識別。
<img id="cropbox" src="x.jpg">
這樣就能實現最簡單的裁剪效果，至於如何結合php等動態語句處理圖片，在置頂的文章裏已經給出了示例。
下表給出基本options參數設置：
| 名稱 |
默認值 |
說明 |
| allowSelect |
true |
允許新選框 |
| allowMove |
true |
允許選框移動 |
| allowResize |
true |
允許選框縮放 |
| trackDocument |
true |
|
| baseClass |
"jcrop" |
基礎樣式名前綴。說明：class="jcrop-holder"，更改的只是其中的 jcrop。 |
| addClass |
null |
添加樣式會。例：假設值爲 "test"，那麼會添加樣式到 class="test jcrop-holder" |
| bgColor |
"black" |
背景顏色。顏色關鍵字、HEX、RGB 均可。 |
| bgOpacity |
0.6 |
背景透明度 |
| bgFade |
false |
使用背景過渡效果 |
| borderOpacity |
0.4 |
選框邊框透明度 |
| handleOpacity |
0.5 |
縮放按鈕透明度 |
| handleSize |
9 |
縮放按鈕大小 |
| handleOffset |
5 |
縮放按鈕與邊框的距離 |
| aspectRatio |
0 |
選框寬高比。說明：width/height |
| keySupport |
true |
支持鍵盤控制。按鍵列表：上下左右（移動）、Esc（取消）、Tab（跳出裁剪框，到下一個） |
| cornerHandles |
true |
允許邊角縮放 |
| sideHandles |
true |
允許四邊縮放 |
| drawBorders |
true |
繪製邊框 |
| dragEdges |
true |
允許拖動邊框 |
| fixedSupport |
true |
|
| touchSupport |
null |
|
| boxWidth |
0 |
畫布寬度 |
| boxHeight |
0 |
畫布高度 |
| boundary |
2 |
邊界。說明：可以從邊界開始拖動鼠標選擇裁剪區域 |
| fadeTime |
400 |
過度效果的時間 |
| animationDelay |
20 |
動畫延遲 |
| swingSpeed |
3 |
過渡速度 |
| minSelect |
[0,0] |
選框最小選擇尺寸。說明：若選框小於該尺寸，則自動取消選擇 |
| maxSize |
[0,0] |
選框最大尺寸 |
| minSize |
[0,0] |
選框最小尺寸 |
| onChange |
function(){} |
選框改變時的事件 |
| onSelect |
function(){} |
選框選定時的事件 |
| onRelease |
function(){} |
取消選框時的事件 |
下表是api方法
| 名稱 |
說明 |
| setImage(string) |
設定（或改變）圖像。例：jcrop_api.setImage("newpic.jpg") |
| setOptions(object) |
設定（或改變）參數，格式與初始化設置參數一樣 |
| setSelect(array) |
創建選框，參數格式爲：[x,y,x2,y2] |
| animateTo(array) |
用動畫效果創建選框，參數格式爲：[x,y,x2,y2] |
| release() |
取消選框 |
| disable() |
禁用 Jcrop。說明：已有選框不會被清除。 |
| enable() |
啓用 Jcrop |
| destroy() |
移除 Jcrop |
| tellSelect() |
獲取選框的值（實際尺寸）。例子：console.log(jcrop_api.tellSelect()) |
| tellScaled() |
獲取選框的值（界面尺寸）。例子：console.log(jcrop_api.tellScaled()) |
| getBounds() |
獲取圖片實際尺寸，格式爲：[w,h] |
| getWidgetSize() |
獲取圖片顯示尺寸，格式爲：[w,h] |
| getScaleFactor() |
獲取圖片縮放的比例，格式爲：[w,h] |
