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:///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}}); | 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 基本相同,只是增加了设置框的大小,所以合并在一处讲解。
![](http://image101.360doc.com/DownloadImg/2016/11/0110/83508633_1.gif) View Code 作者:静默虚空 出处:http://www.cnblogs.com/jingmoxukong/ 欢迎任何形式的转载,但请务必注明出处。
|