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 相比于老版本，新增了支持画多框的功能。
下载地址：
http://jcrop.org/download
下载对应版本的压缩包。
压缩包中有demo目录，其中有多种应用场景的范例，可以参考。
使用方法
载入CSS文件
< link rel ="stylesheet" href ="Jcrop.css" >载入Javascript文件
< script src ="jquery.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}});setSelectnull设置一个框，参数应该分别为这个框的左上角x坐标，左上角y坐标，宽度，高度 例： cb.setSelect([ 147, 55, 456, 390 ]);linkedTRUE是否连接linkedCurrentTRUE是否连接当前选中框canDeleteTRUE允许删除框canSelectTRUE允许选中框canDragTRUE允许拖拽框canResizeTRUE允许放大缩小框子组件eventManagerComponentJcrop.component.EventManager事件管理组件keyboardComponentJcrop.component.Keyboard键盘事件响应组件dragstateComponentJcrop.component.DragState拖拽状态组件stagemanagerComponentJcrop.component.StageManagerstage管理组件animatorComponentJcrop.component.Animator动画处理组件selectionComponentJcrop.component.Selection选中框管理组件stageConstructorJcrop.stageConstructorstage对象构造器stage属性allowSelectTRUE允许选新框multiFALSE允许画多个框multiMaxFALSE最大框数multiCleanupTRUE允许清除所有框animationTRUE允许动画效果animEasingswing'动画效果类型animDuration400动画持续时间fadingTRUE允许淡入淡出效果fadeDuration300淡入淡出持续时间fadeEasingswing'淡入淡出类型bgColorblack'背景颜色bgOpacity0.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' ]拖拽栏dragEventTargetwindow拖拽事件目标xscale1x方向比例yscale1y方向比例boxWidthnullbox宽度boxHeightnullbox高度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框按照比例调整unscalescale的反向操作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 > View Code
