jQuery 图像裁剪插件Jcrop
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>给IMG标签加上ID
<img id="element_id" src="pic.jpg">调用Jcrop
$('#element_id').Jcrop();参数说明
下表为Jcrop对象的主要参数：
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>