Jcrop簡介
Jcrop 是一個功能強大的 jQuery 圖像裁剪插件，結合后端程序（例如：PHP）可以快速的實現圖片裁剪的功能。
Jcrop是一款免費的軟件，采用MIT License發布。
注：本文主要圍繞 Jcrop v2.0.0-RC1 版本進行介紹，一些參數或API在 Jcrop v0.9.12 及之前版本中可能並不支持。
版本
Jcrop v0.9.12 支持畫一個框截取圖片。
Jcrop v2.0.0-RC1相比於老版本，新增了支持畫多框的功能。
下載地址：
下載對應版本的壓縮包。
壓縮包中有demo目錄，其中有多種應用場景的范例，可以參考。
使用方法
載入CSS文件
<
link
rel
="stylesheet"
href
="Jcrop.css"
>
載入Javascript文件
<
script
src
="jquery.js"
></
script
>
< script src ="Jcrop.js" ></ script >
< script src ="Jcrop.js" ></ script >
給IMG標簽加上ID
<
img
id
="element_id"
src
="pic.jpg"
>
調用Jcrop
$('#element_id').Jcrop();
參數說明
下表為Jcrop對象的主要參數：
| 屬性類別 | 名稱 | 默認值 | 說明 |
| 選中框屬性 | edge | { n: 0, s: 0, e: 0, w: 0 } | 設置框的四條邊界線的粗細 例： cb.setOptions({ edge: {n: 15, e: -20, s: -40, w: 28}}); |
| setSelect | null | 設置一個框，參數應該分別為這個框的左上角x坐標，左上角y坐標，寬度，高度 例： cb.setSelect([ 147, 55, 456, 390 ]); |
|
| linked | TRUE | 是否連接 | |
| linkedCurrent | TRUE | 是否連接當前選中框 | |
| canDelete | TRUE | 允許刪除框 | |
| canSelect | TRUE | 允許選中框 | |
| canDrag | TRUE | 允許拖拽框 | |
| canResize | TRUE | 允許放大縮小框 | |
| 子組件 | eventManagerComponent | Jcrop.component.EventManager | 事件管理組件 |
| keyboardComponent | Jcrop.component.Keyboard | 鍵盤事件響應組件 | |
| dragstateComponent | Jcrop.component.DragState | 拖拽狀態組件 | |
| stagemanagerComponent | Jcrop.component.StageManager | stage管理組件 | |
| animatorComponent | Jcrop.component.Animator | 動畫處理組件 | |
| selectionComponent | Jcrop.component.Selection | 選中框管理組件 | |
| stageConstructor | Jcrop.stageConstructor | stage對象構造器 | |
| stage屬性 | allowSelect | TRUE | 允許選新框 |
| multi | FALSE | 允許畫多個框 | |
| multiMax | FALSE | 最大框數 | |
| multiCleanup | TRUE | 允許清除所有框 | |
| animation | TRUE | 允許動畫效果 | |
| animEasing | swing' | 動畫效果類型 | |
| animDuration | 400 | 動畫持續時間 | |
| fading | TRUE | 允許淡入淡出效果 | |
| fadeDuration | 300 | 淡入淡出持續時間 | |
| fadeEasing | swing' | 淡入淡出類型 | |
| bgColor | black' | 背景顏色 | |
| bgOpacity | 0.5 | 背景透明度 | |
| 啟動選項 | applyFilters | [ 'constrain', 'extent', 'backoff', 'ratio', 'shader', 'round' ] | 應用過濾器 |
| borders | [ 'e', 'w', 's', 'n' ] | 邊框 | |
| handles | [ 'n', 's', 'e', 'w', 'sw', 'ne', 'nw', 'se' ] | 句柄 | |
| dragbars | [ 'n', 'e', 'w', 's' ] | 拖拽欄 | |
| dragEventTarget | window | 拖拽事件目標 | |
| xscale | 1 | x方向比例 | |
| yscale | 1 | y方向比例 | |
| boxWidth | null | box寬度 | |
| boxHeight | null | box高度 |
API
下表為Jcrop對象的主要API：
| 名稱 | 說明 |
| init | 初始化Jcrop對象 |
| destroy | 銷毀Jcrop對象 |
| applySizeConstraints | 應用大小限制條件 |
| initComponent | 初始化指定子組件 |
| setOptions | 設置選項參數 例： cb.setOptions({ allowSelect: true, multi: false }); |
| applyFilters | 應用過濾器 |
| getDefaultFilters | 獲取默認過濾器 |
| setSelection | 設置選中框 |
| getSelection | 獲取選中框 |
| newSelection | 創建一個新的選中框 |
| hasSelection | 判斷是否有選中框 |
| removeSelection | 移除選中框 |
| addFilter | 添加過濾器 |
| removeFilter | 移除過濾器 |
| blur | 不聚焦選中框 |
| focus | 聚焦選中框 |
| initEvents | 初始化事件 |
| maxSelect | 設置選中框的最大寬度和高度 |
| refresh | 刷新所有框 |
| blurAll | 所有框都取消聚焦 |
| scale | 框按照比例調整 |
| unscale | scale的反向操作 |
| deleteSelection | 刪除選中框，並聚焦在最早創建的框上 |
| animateTo | 以動畫的形式生成一個新的框 |
| setSelect | 設置框 |
| getContainerSize | 獲取容器的尺寸 |
| resizeContainer | 調整容器的寬度和高度 |
| setImage | 設置Jcrop綁定的圖像，可以用這個函數更換圖片 |
| update | 更新框 |
范例代碼解讀
這部分內容是對於Jcrop2中的demo核心代碼進行注釋講解。詳細內容請參考對於demo的注釋內容
注：以下所示的代碼都是在 Jcrop v2.0.0-RC1 版本的demo代碼基礎上提煉了核心代碼。替換原目錄下的代碼就可以直接運行。
basic.html
這個demo演示了最基本的功能。可以在圖片上拖拽、拉伸框並實時顯示坐標。
box-sizing.html
代碼與
basic.html 基本相同，只是增加了設置框的大小，所以合並在一處講解。
<!
DOCTYPE html
>
< html lang ="en" >
< head >
< script src ="../js/jquery.min.js" ></ script >
< script src ="../js/Jcrop.js" ></ script >
< script type ="text/javascript" >
jQuery( function ($){
var d = document, ge = ' getElementById ' ;
// cropmove事件是指拖動、拖拽框的動作
// 本函數的作用是每次對於框的變化，都記錄其坐標變化，並記錄下來
$( ' #interface ' ).on( ' cropmove ' , function (e,s,c){
d[ge]( ' crop-x ' ).value = c.x;
d[ge]( ' crop-y ' ).value = c.y;
d[ge]( ' crop-w ' ).value = c.w;
d[ge]( ' crop-h ' ).value = c.h;
});
// cropend事件是指拖動、拖拽框的動作結束
// 當拖拽或拉伸框的動作結束，松開鼠標時，彈出提示框顯示最終坐標
$( ' #interface ' ).on( ' cropend ' , function (e,s,c){
d[ge]( ' crop-x ' ).value = c.x;
d[ge]( ' crop-y ' ).value = c.y;
d[ge]( ' crop-w ' ).value = c.w;
d[ge]( ' crop-h ' ).value = c.h;
alert( " x : " + parseInt(c.x) + " , y : " + parseInt(c.y) + " , w : " + parseInt(c.w) + " , h : " + parseInt(c.h));
});
// Most basic attachment example
$( ' #target ' ).Jcrop({
boxWidth: 750 , // 設置框的最大寬度
setSelect: [ 175 , 100 , 400 , 300 ]
});
$( ' #text-inputs ' ).on( ' change ' , ' input ' , function (e){
$( ' #target ' ).Jcrop( ' api ' ).animateTo([
parseInt(d[ge]( ' crop-x ' ).value),
parseInt(d[ge]( ' crop-y ' ).value),
parseInt(d[ge]( ' crop-w ' ).value),
parseInt(d[ge]( ' crop-h ' ).value)
]);
});
});
</ script >
< link rel ="stylesheet" href ="demo_files/main.css" >
< link rel ="stylesheet" href ="demo_files/demos.css" >
< link rel ="stylesheet" href ="../css/Jcrop.css" >
< style >
#text-inputs { margin : 10px 8px 0 ; }
.input-group { margin-right : 1.5em ; }
.nav-box { width : 750px ; padding : 0 !important ; margin : 4px 0 ; background-color : #f8f8f7 ; }
</ style >
</ head >
< body >
< div class ="container" >
< div class ="row" >
< div class ="span12" >
< div class ="jc-demo-box" >
< div id ="interface" class ="page-interface" >< img src ="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id ="target" ></ div >
< div class ="nav-box" >
< form onsubmit ="return false;" id ="text-inputs" >< span class ="input-group" >< b >X </ b >
< input type ="text" name ="cx" id ="crop-x" class ="span1" ></ span >< span class ="input-group" >< b >Y </ b >
< input type ="text" name ="cy" id ="crop-y" class ="span1" ></ span >< span class ="input-group" >< b >W </ b >
< input type ="text" name ="cw" id ="crop-w" class ="span1" ></ span >< span class ="input-group" >< b >H </ b >
< input type ="text" name ="ch" id ="crop-h" class ="span1" ></ span >
</ form >
</ div >
< div class ="clearfix" ></ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
< html lang ="en" >
< head >
< script src ="../js/jquery.min.js" ></ script >
< script src ="../js/Jcrop.js" ></ script >
< script type ="text/javascript" >
jQuery( function ($){
var d = document, ge = ' getElementById ' ;
// cropmove事件是指拖動、拖拽框的動作
// 本函數的作用是每次對於框的變化，都記錄其坐標變化，並記錄下來
$( ' #interface ' ).on( ' cropmove ' , function (e,s,c){
d[ge]( ' crop-x ' ).value = c.x;
d[ge]( ' crop-y ' ).value = c.y;
d[ge]( ' crop-w ' ).value = c.w;
d[ge]( ' crop-h ' ).value = c.h;
});
// cropend事件是指拖動、拖拽框的動作結束
// 當拖拽或拉伸框的動作結束，松開鼠標時，彈出提示框顯示最終坐標
$( ' #interface ' ).on( ' cropend ' , function (e,s,c){
d[ge]( ' crop-x ' ).value = c.x;
d[ge]( ' crop-y ' ).value = c.y;
d[ge]( ' crop-w ' ).value = c.w;
d[ge]( ' crop-h ' ).value = c.h;
alert( " x : " + parseInt(c.x) + " , y : " + parseInt(c.y) + " , w : " + parseInt(c.w) + " , h : " + parseInt(c.h));
});
// Most basic attachment example
$( ' #target ' ).Jcrop({
boxWidth: 750 , // 設置框的最大寬度
setSelect: [ 175 , 100 , 400 , 300 ]
});
$( ' #text-inputs ' ).on( ' change ' , ' input ' , function (e){
$( ' #target ' ).Jcrop( ' api ' ).animateTo([
parseInt(d[ge]( ' crop-x ' ).value),
parseInt(d[ge]( ' crop-y ' ).value),
parseInt(d[ge]( ' crop-w ' ).value),
parseInt(d[ge]( ' crop-h ' ).value)
]);
});
});
</ script >
< link rel ="stylesheet" href ="demo_files/main.css" >
< link rel ="stylesheet" href ="demo_files/demos.css" >
< link rel ="stylesheet" href ="../css/Jcrop.css" >
< style >
#text-inputs { margin : 10px 8px 0 ; }
.input-group { margin-right : 1.5em ; }
.nav-box { width : 750px ; padding : 0 !important ; margin : 4px 0 ; background-color : #f8f8f7 ; }
</ style >
</ head >
< body >
< div class ="container" >
< div class ="row" >
< div class ="span12" >
< div class ="jc-demo-box" >
< div id ="interface" class ="page-interface" >< img src ="http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg" id ="target" ></ div >
< div class ="nav-box" >
< form onsubmit ="return false;" id ="text-inputs" >< span class ="input-group" >< b >X </ b >
< input type ="text" name ="cx" id ="crop-x" class ="span1" ></ span >< span class ="input-group" >< b >Y </ b >
< input type ="text" name ="cy" id ="crop-y" class ="span1" ></ span >< span class ="input-group" >< b >W </ b >
< input type ="text" name ="cw" id ="crop-w" class ="span1" ></ span >< span class ="input-group" >< b >H </ b >
< input type ="text" name ="ch" id ="crop-h" class ="span1" ></ span >
</ form >
</ div >
< div class ="clearfix" ></ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >