Cropper.js 文档翻译

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。