jQuery 图像裁剪插件Jcrop
来源:互联网 发布:生化危机5 知乎 编辑:程序博客网 时间:2024/05/21 10:28
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>
<script src="Jcrop.js"></script>
给IMG标签加上ID
<img id="element_id" src="pic.jpg">
调用Jcrop
$('#element_id').Jcrop();
参数说明
下表为Jcrop对象的主要参数:
例:
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:
例:
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>
阅读全文
0 0
- jQuery 图像裁剪插件Jcrop
- jQuery Jcrop 图像裁剪
- jQuery Jcrop 图像裁剪
- jquery插件图片裁剪jcrop
- JQuery Jcrop—JQuery Jcrop 图像裁剪工具学习
- java开发中常用插件二jcrop---jQuery 图像裁剪插件
- JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
- Jcrop图像裁剪
- java实现图片处理之Jcrop 图像裁剪插件
- jQuery Jcrop 实现图像裁剪(附源代码)
- JQuery-Jcrop插件裁剪头像,及头像的上传
- 图片裁剪插件jcrop用法
- jQuery Jcrop 结合后台java实现图像裁剪切图案例
- Jcrop图片裁剪插件 参数说明
- 头像裁剪插件Jcrop的使用示例
- 图片裁剪插件Jcrop.js的使用
- 实现图像剪裁 jquery.Jcrop
- jQuery图片剪裁插件 Jcrop
- jQuery 事件
- jQuery 动画
- 史上最全设计模式导学目录(完整版)
- jQuery Ajax
- JavaScript
- jQuery 图像裁剪插件Jcrop
- JAVA 设计模式 模板方法模式
- JAVA 设计模式 组合模式
- 查找日期区间的所有周末
- JAVA 设计模式 适配器模式
- springmvc 文件上传
- JAVA 设计模式 装饰者模式
- [Java 基础]接口
- 数据拼接贴贴会有重复如何查找重复的行和剔除重复的行