README

一个简单的jQuery图像裁剪插件。

功能

支持触摸
支持缩放
支持旋转
支持canvas
支持选项
支持方法
支持事件
跨浏览器支持

主要

dist/
├── cropper.css     ( 5 KB)
├── cropper.min.css ( 4 KB)
├── cropper.js      (41 KB)
└── cropper.min.js  (17 KB)

入门

快速开始

有四种快速开始选项可供选择

下载最新版本.
克隆存储库: git clone https://github.com/fengyuanchen/cropper.git.
使用NPM安装: npm install cropper.
使用Bower安装: bower install cropper.

安装

包含文件

<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>

用法

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

<!-- Wrap the image or canvas with a block element -->
<div class="container">
  <img src="picture.jpg">
</div>

$(".container > img").cropper({
  aspectRatio: 16 / 9,
  done: function(data) {
    // Output the result data for cropping image.
  }
});

注意

裁剪器的大小继承自图像父元素的大小，因此请确保将图像包裹在一个可见的块元素中。
结果数据值是根据图像原始大小计算的，因此您可以使用它们直接裁剪图像。

选项

您可以使用$().cropper(options)设置裁剪器选项。如果您想更改全局默认选项，可以使用$.fn.cropper.setDefaults(options)。

aspectRatio

类型: String | Number
默认: "auto"

裁剪区的宽高比。默认情况下，裁剪区是自由比例。

data

类型: Object
选项: "x", "y", "width", "height"
默认: {}

默认情况下，裁剪区将出现在图像的中心。如果您已经有了上一次裁剪的值，并想应用它们，只需将它们作为选项设置即可。

例如

{
  x: 100,
  y: 50,
  width: 480,
  height: 270
}

done

类型: Function
默认: function(data) {}

当裁剪区通过移动、调整大小或裁剪而改变时，将执行此函数。

preview

类型: 选择器
默认: ""

一个jQuery选择器，添加额外的元素进行预览。

multiple

类型: Boolean
默认: false

默认情况下，插件在每个页面上只支持一个裁剪器。如果您打算使用多个，只需将此选项设置为true来初始化它们。

modal

类型: Boolean
默认: true

显示（true）或隐藏（false）裁剪器上方的黑色模态层。

dashed

类型: Boolean
默认: true

显示（true）或隐藏（false）裁剪区上方的虚线。

autoCrop

类型: Boolean
默认: true

初始化时自动渲染裁剪区。

autoCropArea

类型: Number
默认: 0.8

介于0和1之间的数字。定义自动裁剪区域的大小（百分比）。

dragCrop

类型: Boolean
默认: true

启用通过在图像上拖动来删除当前裁剪区并创建一个新的裁剪区。

movable

类型: Boolean
默认: true

启用移动裁剪区。

resizable

类型: Boolean
默认: true

启用调整裁剪区域大小。

可缩放

类型: Boolean
默认: true

启用缩放图片。

可旋转

类型: Boolean
默认: true

启用旋转图片。

checkImageOrigin

类型: Boolean
默认: true

默认情况下，插件将检查图片源，如果它是跨源图片，则会在图片元素上添加一个 "crossOrigin" 属性，以启用 "rotate" 和 "getDataURL"。

minWidth

类型: Number
默认值：0

裁剪区域的最小宽度（原始图片的像素）。只有当您确定图片有这个最小宽度时才使用此选项。

minHeight

类型: Number
默认值：0

裁剪区域的最小高度（原始图片的像素）。只有当您确定图片有这个最小高度时才使用此选项。

maxWidth

类型: Number
默认值：Infinity

裁剪区域的最大宽度（原始图片的像素）。只有当您确定图片有这个最大宽度时才使用此选项。

maxHeight

类型: Number
默认值：Infinity

裁剪区域的最大高度（原始图片的像素）。只有当您确定图片有这个最大高度时才使用此选项。

build

类型: Function
默认值：null

"build.cropper" 事件的处理程序。

built

类型: Function
默认值：null

"built.cropper" 事件的处理程序。

dragstart

类型: Function
默认值：null

"dragstart.cropper" 事件的处理程序。

dragmove

类型: Function
默认值：null

"dragmove.cropper" 事件的处理程序。

dragend

类型: Function
默认值：null

"dragend.cropper" 事件的处理程序。

方法

zoom

缩放图片。
参数：一个数字（正数用于放大，负数用于缩小）。
用法：$().cropper("zoom", 0.1) 或 $().cropper("zoom", -0.1)。

rotate

旋转图片（用通过 canvas 生成的新的旋转图片替换原始图片）。
参数：一个数字（正数用于向右旋转，负数用于向左旋转）。
用法：$().cropper("rotate", 90) 或 $().cropper("rotate", -90)。
注意：在调用此方法之前，请确保浏览器支持 canvas。
注意：如果是跨源图片，不要在 IE9/10 中调用此方法（不支持 crossOrigin 属性）。

enable

启用（解冻）裁剪器。
用法：$().cropper("enable")。

disable

禁用（冻结）裁剪器。
用法：$().cropper("disable")。

reset

将裁剪区域重置为初始状态。
添加一个 true 参数以将裁剪区域重置为默认状态。
用法：$().cropper("reset") 或 $().cropper("reset", true)。

clear

清除裁剪区域。
用法：$().cropper("clear")。

replace

替换图片。
参数：一个 URL。
用法：$().cropper("replace", "example.jpg")。

destroy

销毁裁剪器并从图片中删除实例。
用法：$().cropper("destroy")。

getData([rounded])

获取裁剪区域数据。
rounded(可选)
- 类型：Boolean
- 默认值：false
- 使用 Math.round 对输出数据进行四舍五入。
用法：$().cropper("getData") 或 $().cropper("getData", true)。

setData

使用新数据重置裁剪区域。
参数：一个包含 "x"，"y"，"width"，"height" 的对象。
用法：$().cropper("setData", {width: 480, height: 270})。

提示：如果您想删除当前数据，只需传递一个空对象或 null。例如：$().cropper("setData", {}) 或 $().cropper("setData", null)。

setAspectRatio

在构建后启用重置宽高比。
参数："auto" 或一个正数（"auto" 用于自由比例）。
用法：$().cropper("setAspectRatio", 1.618)。

getImageData

获取包含图像数据的对象，包含："naturalWidth"、"naturalHeight"、"width"、"height"、"aspectRatio"、"ratio" 和 "rotate"。
"aspectRatio" 是 "naturalWidth / naturalHeight" 的值。
"ratio" 是 "width / naturalWidth" 的值。
"rotate" 是当前图像的旋转角度。
用法：$().cropper("getImageData")。

setDragMode

更改拖动模式。
参数："crop"、"move" 和 "none"。
用法：$().cropper("setDragMode", "crop")。

提示：您可以通过双击图像来切换 "crop" 和 "move" 模式。

getDataURL([options[, type[, quality]]])

获取裁剪区域的 data url（base64 图像）。
参数
- options：一个 Object，包含："width"、"height"。定义结果图像的大小。
- type：一个 String，表示图像格式。默认类型是 image/png。其他类型："image/jpeg"、"image/webp"。
- quality：一个 Number，介于 0 和 1 之间，表示如果请求的类型是 image/jpeg 或 image/webp，则表示图像质量。
注意：在调用此方法之前，请确保浏览器支持 canvas。
注意：当它是一个跨源图像时，不要在 IE9/10 中调用此方法（不支持 CORS 设置属性）。
用法

$().cropper("getDataURL")

$().cropper("getDataURL", {
  width: 100,
  height: 100
})

$().cropper("getDataURL", "image/jpeg")

$().cropper("getDataURL", "image/jpeg", 0.8)

$().cropper("getDataURL", {
  width: 100,
  height: 100
}, "image/jpeg", 0.8)

事件

build.cropper

当 Cropper 开始构建时将触发此事件。

built.cropper

当 Cropper 已构建时将触发此事件。

dragstart.cropper

在裁剪区域开始移动之前将触发此事件。

相关事件："mousedown"、"touchstart"。

dragmove.cropper

当裁剪区域正在移动时将触发此事件。

相关事件："mousemove"、"touchmove"。

dragend.cropper

当裁剪区域停止移动后触发此事件。

相关事件："mouseup"、"mouseleave"、"touchend"、"touchleave"、"touchcancel"。

无冲突

如果您必须使用具有相同命名空间的另一个插件，只需调用 $.fn.cropper.noConflict 方法即可恢复。

<script src="other-plugin.js"></script>
<script src="cropper.js"></script>
<script>
$.fn.cropper.noConflict();
// Code that uses other plugin's "$().cropper" can follow here.
</script>

浏览器支持

Chrome 36+
Firefox 31+
Internet Explorer 8+
Opera 21+
Safari 5.1+

作为 jQuery 插件，您可以参考 jQuery 浏览器支持。

许可

在 MIT 许可下发布。

fengyuanchen / cropper

维护者

详细信息