Jcrop是jQuery环境下的一款功能强大使用的图片剪裁插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能，支持宽高比例锁定，支持 minSize / maxSize设置，支持改变选区或移 动选区时的回调（Callback），支持用键盘微调选 区，通过API创建互 动比如动画效果，支持CSS样式，效果如下:
官方地址：http://deepliquid.com/content/Jcrop.html
在线演示：http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
下载地址：http://jcrop.googlecode.com/files/jquery.Jcrop-0.9.8.zip
imgAreaSelect
官方网站：http://odyniec.net/projects/imgareaselect/
这里介绍一下快速使用这个插件的方法：
准备工作完成后，我们可以建立一个HTML 页面，在页面的<head>之间加入下面的代码：
<head>
...
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
...
</head>
然后调用imgAreaSelect 方法来激活图片的选中区域<script type="text/javascript">
$(document).ready(function () {
$('img#photo').imgAreaSelect({ handles: true, onSelectEnd: someFunction });
});
</script>
imgAreaSelect 方法有很多参数可以定义：
| 参数 | 描述 |
|---|---|
| aspectRatio | 设定选取区域的显示比率，如：”4:3″ |
| autoHide | 如果设置为true，当选择区域选择结束时消失，默认值为：false |
| classPrefix | 这是一个字符串，表示插件样式的类名加前缀，默认值为”imgareaselect” |
| disable | 如果设置为true，禁用插件 |
| enable | 如果设置为true，插件被重新启用 |
| fadeSpeed | 如果设置为大于零的数字，则用优美的淡入/淡出动画来显示图片，默认值为 false |
| handles | 如果设置为true，调整手柄则会显示在选择区域内，如果设置为”corners”，则只有角处理会显示调整手柄，默认值为false |
| hide | 如果设置为true，选择范围是隐藏 |
| imageHeight | 图片的真实高度 (if scaled with the CSS width and height properties) |
| imageWidth | 真实图片宽度 (if scaled with the CSS width and height properties) |
| instance | 如果设置为true，imgAreaSelect() 调用返回一个imgAreaSelect绑定到的图像的实例，使您可以使用它的API方法 |
| keys | 启用/禁用键盘支持，默认值为false |
| maxHeight | 选取的最大高度（单位为像素） |
| maxWidth | 选取的最大宽度（单位为像素） |
| minHeight | 选取的最小高度（单位为像素） |
| minWidth | 选取的最小宽度（单位为像素） |
| movable | 确定选取是否可以移动，默认值为true |
| parent | 一个jQuery对象或选择字符串，指定被追加到父元素，默认值为”body” |
| persistent | 如果设置为true，选择区以外的点击将不会启动一个新的选区（即用户将只能移动/调整现有的选择范围），默认值为false |
| resizable | 确定是否选择面积应可调整大小，默认值为true |
| show | 如果设置为true，选区则会显示 |
| x1 y1 |
最初选择区域的左上角坐标 |
| x2 y2 |
最初选择区域的右上角坐标 |
| zIndex | 插件元素的z-index值，正常情况下imgAreaSelect会自动分配，但有少数情况，有必要将其设置为制定值 |
| onInit | 插件初始化时的回调函数 |
| onSelectStart | 插件开始选择时的回调函数 |
| onSelectChange | 插件改变选区时的回调函数 |
| onSelectEnd | 插件结束选区时的回调函数 |