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 >
