图片/图形
Jcrop 跨浏览器的jquery图片剪裁插件
PetitQ
Jcrop 是一款跨浏览器的 jquery 图片剪裁插件。它兼容非常古老的 ie6 浏览器，并提供多个配置参数，实现功能强大的图片剪裁功能。Jcrop 图片剪裁插件的特点还有：
使用简单
也想出现在这里？联系我们吧
支持按比例锁定剪裁区域
支持设置最大尺寸和最小尺寸
剪裁区域选定后或移动时支持回调函数
支持键盘操作
提供丰富的 API，包括动画
支持自定义 CSS，LESS
支持移动设备 iOS 和 Android 等
使用方法
在页面中引入 jquery 和 jquery.Jcrop.min.js 文件，以及样式文件 jquery.Jcrop.css。
<script src='js/jquery.min.js'></script>
<script src='js/jquery.Jcrop.min.js'></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
HTML 结构
例如要剪裁一张图片如下：
<img src="flowers.jpg" id="target" />
初始化插件
在页面 DOM 元素加载完毕之后，通过下面的方法来初始化 Jcrop 图片剪裁插件。
<script>
jQuery(function($) {
$('#target').Jcrop();
});
</script>
配置参数
Jcrop 图片剪裁插件的可用配置参数有：
| 参数 | 类型 | 默认值 | 描述 |
| aspectRatio | decimal | n/a | 剪裁区域的宽高比。 |
| minSize | array [ w, h ] | 剪裁区域最小宽度和高度。 | n/a |
| maxSize | array [ w, h ] | 剪裁区域最大宽度和高度。 | n/a |
| setSelect | array [ x, y, x2, y2 ] | 设置一个初始的剪裁区域。 | n/a |
| bgColor | 颜色值 | 设置背景容器的颜色值。 | 'black' |
| bgOpacity | decimal 0 - 1 | 剪裁时图片外区域的透明度。 | .6 |
示例：
<script>
jQuery(function($) {
$('#target').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>
事件
Jcrop 图片剪裁插件的的可用事件（回调函数）有：
onSelect：当剪裁区域选择完毕时调用
onChange：当剪裁区域移动时调用
onRelease：当剪裁区域被释放时调用
例如：定义一个事件处理函数如下：
function showCoords(c)
{// 参数C可以像下面这样使用// c.x, c.y, c.x2, c.y2, c.w, c.h};
如下面这样绑定事件处理函数。
jQuery(function($) {
$('#target').Jcrop({
onSelect: showCoords,
onChange: showCoords});
});
Github 地址：https://github.com/tapmodo/Jcrop
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
