浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2)
Cropper 一个简单的 jQuery 图片裁剪插件。
Demo 不依赖 jQuery 的 Cropper 版本功能特性，支持选项，支持方法，支持事件，支持触屏 (移动端)，支持缩放，支持旋转，支持翻转，支持 canvas，支持多个 croppers，跨浏览器支持
入门
下载最新版本. Clone 库: git clone https://github.com/fengyuanchen/cropper.git. 用 NPM: npm install cropper 安装 用 Bower: bower install cropper 安装 安装 引入文件:
<script src="/path/to/jquery.js"></script><!-- 需要 jQuery --> <link href="/path/to/cropper.css" rel="stylesheet"> <script src="/path/to/cropper.js"></script>CDNJS CDNJS 提供了 Cropper 的 CSS 和 JavaScript CDN 。 你可以在 这里 找到链接。
RawGit
<link href="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.css" rel="stylesheet"> <script src="https://cdn.rawgit.com/fengyuanchen/cropper/v1.0.0/dist/cropper.min.js"></script>用法 用 $.fn.cropper 方法初始化
<div class="container"> <img src="picture.jpg"> </div> $('.container > img').cropper({ aspectRatio: 16 / 9, crop: function(e) { // Output the result data for cropping image. console.log(e.x); console.log(e.y); console.log(e.width); console.log(e.height); console.log(e.rotate); console.log(e.scaleX); console.log(e.scaleY); } });备注 cropper 的尺寸是由图片的父元素（包裹）继承来的，所以要确保用一个可见的块元素包裹图片。
输出的裁剪数据基于原始图像的尺寸，所以你可以直接使用它们来裁剪图像。
如果你尝试去对一个跨域的图片使用 cropper，请确保你的浏览器支持 HTML5 CORS 设置属性，并且你的图片服务器支持 Access-Control-Allow-Origin 选项。
选项 你可以用 $().cropper(options) 方法设置 cropper 的选项。如果你想修改全局默认选项，你需要用到 $.fn.cropper.setDefaults(options)。
aspectRatio 类型: Number 默认值: NaN 设置剪裁框的长宽比。默认的长宽比是自由比。 data 类型: Object 默认值: null 上一个剪裁数据，前提是你做了存储。将会自动传递给 setData 方法。
preview 类型: String (jQuery 选择器) 默认值: ‘’ 添加额外的元素（容器）来作为预览。例如：
<div id="preview"></div> $('.container > img').cropper({ preview: $("#preview") });备注:
最大宽度是预览容器的初始宽度。 最大高度是预览容器的初始高度。 如果你设置了一个 aspectRatio 选项，确保为预览容器设置相同的长宽比（确保剪裁框和预览容器的长宽比是一样的，这样能避免预览的时候图片变形）。 如果预览显示不正确，那就为预览容器设置 overflow:hidden 。 strict 类型: Boolean 默认值: true 在严格模式下，剪裁框不能移出画布（图片包裹容器）。
responsive 类型: Boolean 默认值: true 在调整窗口大小的时候重新构建 cropper。
checkImageOrigin 类型: Boolean 默认值: true 默认情况下，插件会检测图片的源，如果它是跨域的图片，该图片元素将会被添加上一个 crossOrigin 属性，图片 url 地址会被加上一个时间戳，以用来为 getCroppedCanvas 重新加载图片。
通过给图片加上 crossOrigin 属性，将会阻止给图片的 url 加上时间戳，并停止重新加载图片。
modal 类型: Boolean 默认值: true 在图片上方以及剪裁框下方显示黑色模式（也就是除剪裁框以外的区域，默认是一个不透明度为0.5的黑色遮罩）。
guides 类型: Boolean 默认值: true 在剪裁框上方显示虚线
center 类型: Boolean 默认值: true 在剪裁框上方显示中心标识（剪裁框中间的白色的小加号）
highlight 类型: Boolean 默认值: true 在剪裁框上面显示白色的模态框（高亮剪裁框）
background 类型: Boolean 默认值: true 显示容器的网格背景（容器中，图片未占用区域显示的透明背景）
autoCrop 类型: Boolean 默认值: true 允许初始化的时候自动剪裁图片
autoCropArea 类型: Number 默认值: 0.8 (图片的 80% ) 自动剪裁的区域大小（百分比），介于 0 到 1 之间的数字。
dragCrop 类型: Boolean 默认值: true 允许移除当前的剪裁框，然后通过在图片上拖动鼠标创建一个新的剪裁框。
movable 类型: Boolean 默认值: true 允许移动图片。
rotatable 类型: Boolean 默认值: true 允许旋转图片。
scalable 类型: Boolean 默认值: true 允许缩放图片。
zoomable 类型: Boolean 默认值: true 允许缩放图片。
mouseWheelZoom 类型: Boolean 默认值: true 允许在鼠标滚动的时候缩放图片。
wheelZoomRatio 类型: Number 默认值: 0.1 当通过滚动鼠标缩放图片的时候，定义缩放尺寸。
touchDragZoom 类型: Boolean 默认值: true 允许通过触摸拖动来缩放图片。
cropBoxMovable 类型: Boolean 默认值: true 允许移动剪裁框。
cropBoxResizable 类型: Boolean 默认值: true 允许调整剪裁框大小。
doubleClickToggle 类型: Boolean 默认值: true 允许通过双击 cropper 来切换剪裁（图片）和移动（图片）模式。
minContainerWidth 类型: Number 默认值: 200 容器最小宽度。
minContainerHeight 类型: Number 默认值: 100 容器最小高度。
minCanvasWidth 类型: Number 默认值: 0 画布最小宽度（图片包裹器）。
minCanvasHeight 类型: Number 默认值: 0 画布最小高度（图片包裹器）。
minCropBoxWidth 类型: Number 默认值: 0 剪裁框最小宽度。
minCropBoxHeight 类型: Number 默认值: 0 剪裁框最小高度。
build 类型: Function 默认值: null build.cropper 事件的快捷方式。
built 类型: Function 默认值: null built.cropper 事件的快捷方式。
cropstart 类型: Function 默认值: null cropstart.cropper 事件的快捷方式。
cropmove 类型: Function 默认值: null cropmove.cropper 事件的快捷方式。
cropend 类型: Function 默认值: null cropend.cropper 事件的快捷方式。
crop 类型: Function 默认值: null crop.cropper 事件的快捷方式。
zoom 类型: Function 默认值: null zoom.cropper 事件的快捷方式。
