newCropper(image,options)
Notes:
- 最大宽度是预览容器的初始宽度。
- 最大高度是预览容器的初始高度。
- 如果设置aspectRatio选项，请确保将预设容器的宽高比设置为相同。
- 如果预览未正确显示，请将溢出：隐藏样式设置为预览容器。
Options:
| option | 类型 | 默认 | 值 | 说明 |
|---|---|---|---|---|
| viewMode | Number | 0 | 0:无限制; 1:将裁剪框限制为不超过画布的大小; 2:限制最小画布尺寸以适应容器。如果画布和容器的比例不同，则最小画布将在其中一个维度中被额外的空格包围。 3:限制最小画布尺寸以填充容器。如果画布和容器的比例不同，则容器将无法将整个画布适合其中一个尺寸。 |
定义裁剪器的视图模式。如果将viewMode设置为0，裁剪框可以在画布外展开，而值为1,2或3将裁剪框限制为画布的大小。 2或3的视图模式将另外将画布限制到容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。 |
| dragMode | String | 'crop' | 'crop':创建一个新的裁剪框 'move':移动画布 'none':do nothing |
定义裁剪器的拖动模式 |
| aspectRatio | Number | NaN | 设置裁剪框的宽高比。默认情况下，裁剪框是空闲比率。 | |
| data | Object | null | 如果您已经存储了以前的裁剪数据，将在构建时自动传递给setData方法。 | |
| preview | Element or String | ' ' | 添加额外的元素（容器）进行预览。 | |
| responsive | Boolean | true | 调整窗口大小时，重新渲染裁剪器。 | |
| restore | Boolean | true | 检查当前图像是否是交叉原始图像。 如果是，当克隆图像时，将将crossOrigin属性添加到克隆的图像元素中，并将时间戳添加到src属性以重新加载源图像以避免浏览器缓存错误。 通过将crossOrigin属性添加到图像将停止向图像url添加时间戳，并停止重新加载图像。 如果图像的crossOrigin属性的值为“use-credentials”，则在通过XMLHttpRequest读取图像数据时，withCredentials属性将设置为true。 |
|
| checkOrientation | Boolean | true | 检查当前图像的Exif方向信息。 更准确地说，读取旋转或翻转图像的Orientation值，然后用1（默认值）覆盖Orientation值，以避免在iOS设备上出现一些问题（1,2）。 需要同时将可旋转和可缩放选项设置为true。 注意：不要相信这一点，因为一些JPG图像有不正确（不标准）方向值。 |
|
| modal | Boolean | true | 在图像上方和裁剪框下方显示黑色模态。 | |
| guides | Boolean | true | 显示裁剪框上方的虚线。 | |
| center | Boolean | true | 在裁剪框上方显示中心指示器。 | |
| highlight | Boolean | true | 在裁剪框上方显示白色模态（突出显示裁剪框）。 | |
| background | Boolean | true | 显示容器的网格背景。 | |
| autoCrop | Boolean | true | 启用在初始化时自动裁剪图像。 | |
| autoCropArea | Number | 0.8 (80% of the image) | 介于0和1之间的数字。定义自动裁剪区域大小（百分比）。 | |
| movable | Boolean | true | 启用移动图像。 | |
| rotatable | Boolean | true | 启用旋转图像。 | |
| scalable | Boolean | true | 启用缩放图像。 | |
| zoomable | Boolean | true | 启用缩放图像 | |
| zoomOnTouch | Boolean | true | 启用通过拖动触摸缩放图像。 | |
| zoomOnWheel | Boolean | true | 启用通过滚动鼠标放大图像。 | |
| wheelZoomRatio | Number | 0.1 | 通过滚动鼠标缩放图像时，可以定义缩放倍率。 | |
| cropBoxMovable | Boolean | true | 启用通过拖动来移动裁剪框。 | |
| cropBoxResizable | Boolean | true | 启用通过拖动调整裁剪框的大小。 | |
| toggleDragModeOnDblclick | Boolean | true | 在裁剪器上点击两次时，启用“切割”和“移动”之间切换拖动模式。 | |
| minContainerWidth | Number | 200 | 容器的最小宽度。 | |
| minContainerHeight | Number | 100 | 容器的最小高度。 | |
| minCanvasWidth | Number | 0 | 画布的最小宽度（图像包装器）。 | |
| minCanvasHeight | Number | 0 | 作物盒的最小高度。 注意：这个大小是相对于页面，而不是图像。 |
|
| ready | Function | null | “准备”事件的捷径 | |
| cropstart | Function | null | ||
| cropmove | Function | null | ||
| cropend | Function | null | ||
| crop | Function | null | ||
| zoom | Function | null |
Methods
由于在加载映像时出现异步进程，因此除了“setAspectRatio”，“replace”和“destroy”之外，还应调用大部分方法。
crop(): 手动显示裁剪框。
new Cropper(image, {
autoCrop: false,
ready: function () {
// Do something here
// ...
// And then
this.cropper.crop();
}
});
reset():将图像和裁剪框重置为初始状态。
clear():清除裁剪框。
replace(url[, onlyColorChanged]):更换图像的src并重建裁剪器。
- url:
- Type: String
- A new image url.
- onlyColorChanged (optional):
- Type: Boolean
- 如果只改变颜色，而不是大小，那么裁剪器只需要更改所有相关图像的srcs，而不需要重建裁剪器。这可以用于应用过滤器。
- 如果不存在，其默认值为false。
enable()：启用（解冻）裁剪器。
disable()：禁用（冻结）裁剪器。
destroy()：销毁裁剪器并从图像中删除实例。
move(offsetX[, offsetY])：用相对偏移移动画布（图像包装器）。
- offsetX：
- Type: Number
- 在水平方向移动大小（px）。
- offsetY (optional):
- Type: Number
- 在垂直方向移动大小（px）。
- 如果不存在，其默认值为offsetX。
网友评论