一个简单的 jQuery 图片裁剪插件----cropper

浏览器支持
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 安装
安装
引入文件:

CDNJS
CDNJS 提供了 Cropper 的 CSS 和 JavaScript CDN 。 你可以在 这里 找到链接。

RawGit

用法
用 $.fn.cropper 方法初始化

  

$('.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 选择器)
默认值: ‘’
添加额外的元素（容器）来作为预览。例如：

$('.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 事件的快捷方式。

---