简单功能强大的jQuery图片剪裁插件Image Cropper

引入必要的js和css核心文件
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
构建html，可以将图片或canvas直接包裹到一个块级元素中

<div class="container">
  <img src="picture.jpg">
</div>
初始化插件，可以使用$.fn.cropper方法来初始化该图片剪裁插件。

$('.container > img').cropper({
  aspectRatio: 16 / 9,
  crop: function(data) {
    // 出来裁切后的图片数据.
  }
});

注意事项：

注意：剪裁区域的尺寸继承自图片的父容器（包裹容器），所以要确保包裹图片的是一个可见的块级元

输出的剪裁数据基于原始的图片尺寸，你可以使用这些数据直接剪裁图片。

如果你要使用跨源图片来作为剪裁图片，请确保你的浏览器支持HTML5 CORS settings attributes，并且你的图片服务器支持Access-Control-Allow-Origin属性。

文档地址：http://www.jq22.com/jquery-info9322
官方网址:http://fengyuanchen.github.io/cropper/