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 }); });
Jcrop图片剪裁插件的github地址为:https://github.com/tapmodo/Jcrop
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!