dragMode

定义裁剪器的拖动模式

默认,单机拖动创建新的裁剪框,可拖动裁剪框

移动画布,可拖动裁剪框

仅拖动裁剪框

initialAspectRatio

定义裁剪框初始化比例，默认与画布比例相同，例：1/1，16/9

aspectRatio

裁剪框固定比例，默认自由比例，例：1/1，16/9

默认null，当autoCrop设置为true时，调用setData初始化裁剪框

preview

裁剪预览容器，可以是容器的选择器'.img-preview'|'#id_pre'，
容器对象$('#id_pre')，容器对象列表$('.img-preview')，
容器的css样式必须包含overflow: hidden;，否则无法达到裁剪预览的效果 ,
容器的长宽比最好与裁剪框一致。

responsive

默认true，当窗口大小改变时重新渲染裁剪器。

restore

默认true，当窗口大小改变时是否保留裁剪区。

checkCrossOrigin

为跨站图片添加crossOrigin属性，并在src上添加时间戳以避免浏览器缓存错误。

checkOrientation

检测图片的方向值，rotatable和scalable必须设置为true。

modal

默认true，是否显示遮罩。

guides

默认true，是否显示裁剪框虚线

center

默认true，裁剪框是否位于画布中间

highlight

默认true，裁剪区是否高亮显示

background

默认true，容器马赛克是否显示

autoCrop

默认true，画布加载后是否自动显示裁剪框

autoCropArea

默认0.8，自定义裁剪框占画布的比例

movable

默认true，画布是否可移动

rotatable

默认true，画布是否可旋转

scalable

默认true，画布是否可缩放（测试无效）

zoomable

默认true，画布是否可缩放

zoomOnTouch

默认true，画布是否可通过触摸缩放

zoomOnWheel

默认true，画布是否可通过鼠标滚动缩放

wheelZoomRatio

默认0.1，画布缩放比例

cropBoxMovable

默认true，裁剪框是否可以拖动

cropBoxResizable

默认true，裁剪框是否可以通过拖动改变大小

toggleDragModeOnDblclick

默认true，是否允许通过双击使得dragMode模式在move和crop直接切换

minContainerWidth

默认200，容器最小宽度

minContainerHeight

默认100，容器最小高度

minCanvasWidth

默认0，画布最小宽度

minCanvasHeight

默认0，画布最小高度

minCropBoxWidth

默认0，裁剪框最小宽度，大小相对的是页面，而非画布

minCropBoxHeight

默认0，裁剪框最小宽度，大小相对的是页面，而非画布

cropBoxMovable

默认true，裁剪框是否可以拖动

ready

函数方法，裁剪器就绪事件

cropstart

函数方法，裁剪开始事件

cropmove

函数方法，裁剪移动事件

zoom(ratio)

按比例缩放画布

• ratio

  缩放比例，正数放大，负数缩小

      cropper.zoom(0.1);
      cropper.zoom(-0.1);
  

zoomTo(ratio[, pivot])

以pivot坐标为中心，将画布缩放至ratio倍

• ratio

  缩放比例，大于0的数字

• pivot

  相对于容器左上角的坐标，{ x: Number, y: Number }

    cropper.zoomTo(1); // 1:1 (canvasData.width === canvasData.naturalWidth)
    const containerData = cropper.getContainerData();
    // Zoom to 50% from the center of the container.
    cropper.zoomTo(.5, {
      x: containerData.width / 2,
      y: containerData.height / 2,

rotate(degree)

画布旋转degree度

• degree

  旋转度数，正数右转，负数左转

    cropper.rotate(90);
    cropper.rotate(-90);

rotateTo(degree)

将画布旋转至degree度

scale(scaleX[, scaleY])

翻转图像，负数翻转，需要css2d支持，IE9+

• scaleX

  默认1，为1则什么都不做，-1水平翻转

• scaleY

  默认与scaleX相同，为1则什么都不做，-1垂直翻转

    cropper.scale(-1); // Flip both horizontal and vertical
    cropper.scale(-1, 1); // Flip horizontal
    cropper.scale(1, -1); // Flip vertical

scaleX(scaleX)

水平缩放图像，负数翻转，绝对值小于1缩小，大于等于1放大

• scaleX

  默认1，为1则什么都不做，-1水平翻转

scaleY(scaleY)

垂直缩放图像，负数翻转，绝对值小于1缩小，大于等于1放大

• scaleY

  默认1，为1则什么都不做，-1水平翻转

getData([rounded])

获取裁剪框基于原始画布的坐标，长宽，旋转角度以及水平和垂直缩放比例

• rounded

  默认false， 是否四舍五入

• 返回值

      {
      x: 左侧偏移量
      y: 顶部偏移量
      width: 宽
      height: 高
      rotate: 转角
      scaleX: 水平扭曲
      scaleY: 垂直扭曲
  

setData(data)

设置裁剪框基于原始画布的坐标，长宽，旋转角度以及水平和垂直缩放比例

同getData([rounded])返回值

getContainerData()

获取容器大小数据

• 返回值

      {
      width: 容器当前宽度
      height: 容器当前高度
  

getImageData()

获取图片的位置、大小等数据

• 返回值

      {
          left: 左侧偏移量
          top: 顶部偏移量
          width: 图像宽
          height: 图像高
          naturalWidth: 图像自然宽度
          naturalHeight: 图像自然高度
          aspectRatio: 图片比例
          rotate: 图片转角
          scaleX: 水平缩放比例
          scaleY: 垂直缩放比例
  

getCanvasData()

获取画布的位置、大小等数据

• 返回值

    {
        left: 画布左侧偏移量
        top: 画布顶部偏移量
        width: 画布宽
        height: 画布高
        naturalWidth: 画布自然宽度，只读
        naturalHeight: 画布自然高度，只读

    const imageData = cropper.getImageData();
    const canvasData = cropper.getCanvasData();
    if (imageData.rotate % 180 === 0) {
      console.log(canvasData.naturalWidth === imageData.naturalWidth);
      // > true

setCanvasData(data)

设置画布的位置、大小等数据

• data

      {
          left: 画布左侧偏移量
          top: 画布顶部偏移量
          width: 画布宽
          height: 画布高(跟画布比例有关，基本只受width影响)
  

getCropBoxData()

获取裁剪框位置和大小数据

• 返回值

    {
        left: 左侧偏移量
        top: 顶部偏移量
        width: 宽
        height: 高

setCropBoxData(data)

设置裁剪框位置和大小

与getCropBoxData()的返回值相同

getCroppedCanvas([options])

根据新画布参数options,用新的画布绘制裁剪区的图像。

• options

      width: 输出画布的目标宽度
      height: 输出画布的目标高度
      minWidth: 输出画布的最小宽度，默认0
      minHeight: 输出画布的最小高度，默认0
      maxWidth: 输出画布的最大宽度，默认无限制
      maxHeight: 输出画布的最大高度，默认无限制
      fillColor: 透明区域填充色，默认透明，JPEG图像如果不设置则透明区域为黑色背景
      imageSmoothingEnabled: 图像是否平滑，默认`true`
      imageSmoothingQuality: 图像平滑质量，可选`low` ,`medium`,或`high`，默认`low` .
       
  HTMLCanvasElement
   
        
  HTMLCanvasElement.toDataURL
  HTMLCanvasElement.toBlob