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}}); |
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 基本相同,只是增加了设置框的大小,所以合并在一处讲解。
View Code
本文转自静默虚空博客园博客,原文链接:http://www.cnblogs.com/jingmoxukong/p/4173421.html,如需转载请自行联系原作者