跨浏览器的jquery图片剪裁插件Jcrop

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图片剪裁插件的可用配置参数有：

示例：

<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