cropper剪裁插件的用法

使用方法

加载的文件

必须按照顺序加载三个js

<link rel="stylesheet" href="../assets/lib/cropper/cropper.css">


<script src="../assets/lib/jquery.js"></script>
<script src="../assets/lib/cropper/Cropper.js"></script>
<script src="../assets/lib/cropper/jquery-cropper.js"></script>

初始化剪裁插件

let $image = $('#image'); // 找到一张图片（默认显示的那张图片）

// 配置项
let option = {
  // 参考下面的 [参数] 部分
  // 比如：aspectRatio 表示剪裁比例
  aspectRatio: 400 / 280
};

// 初始化
$image.cropper(option);

方法的使用

$image.cropper('方法名', 方法的参数);

比如，有一个 replace 方法：replace(url)

$image.cropper('replace', url);

比如，剪裁得到canvas，原方法是这样说明的：getCroppedCanvas({ width: 30, height: 10 })

let canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 10 });

把canvas转成我们想要的格式

// 剪裁之后，会得到一个canvas
// 能够把 canvas 转成 base64 格式；转成 文件对象 格式，只能转成这两种格式

// 转成 base64格式
let base64 = canvas.toDataURL();

// 转成 文件对象 格式
canvas.toBlob(function (blob) {
  // blob是二进制大对象格式，把它 append 到 FormData 中，会变为文件对象
});

参数

• 你可以通过$().cropper(options)方法来设置参数。如果你想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。
• aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。
• crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
• preview：类型：String(jQuery选择器)，默认值’’。添加额外的元素（容器）的预览。注意：
• 最大宽度是剪裁容器的初始化宽度
• 最大高度是剪裁容器的初始化高度
• 如果你设置了aspectRatio参数，确保预览容器具有相同的比例
• strict：类型：Boolean，默认值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
• responsive：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
• checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
• background：类型：Boolean，默认值true。是否在容器上显示网格背景。
• modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
• guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
• highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
• autoCrop：类型：Boolean，默认值true。是否在初始化时允许自动剪裁图片。
• autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁区域的大小。
• dragCrop：类型：Boolean，默认值true。是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
• movable：类型：Boolean，默认值true。是否允许移动剪裁框。
• resizable：类型：Boolean，默认值true。是否允许改变剪裁框的大小。
• zoomable：类型：Boolean，默认值true。是否允许放大缩小图片。
• mouseWheelZoom：类型：Boolean，默认值true。是否允许通过鼠标滚轮来缩放图片。
• touchDragZoom：类型：Boolean，默认值true。是否允许通过触摸移动来缩放图片。
• rotatable：类型：Boolean，默认值true。是否允许旋转图片。
• minContainerWidth：类型：Number，默认值200。容器的最小宽度。
• minContainerHeight：类型：Number，默认值100。容器的最小高度。
• minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
• minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
• 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事件的简写方式。
• zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。
• zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。

方法

因为图片是异步加载的，所以你需要在built之后才能调用下面的方法，setAspectRatio、replace和destroy方法例外。

$().cropper({`` ``built: ``function` `() {``  ``$().cropper(``'method'``, argument1, , argument2, ..., argumentN)`` ``}``}

move(offsetX, offsetY)：

• offsetX：类型：Number，水平方向上移动的大小，单位像素。
• offsetY：类型：Number，垂直方向上移动的大小，单位像素。

移动一幅图片：

$().cropper(``'move'``, 1, 0)``$().cropper(``'move'``, 0, -1)

zoom(ratio)：

ratio：

类型：Number

• Zoom in：需要一个正数（ratio > 0）
• Zoom out：需要一个负数（ratio < 0）

缩放一幅图片：

$().cropper(``'zoom'``, 0.1)``$().cropper(``'zoom'``, -0.1)

rotate(degree)：

ratio：

类型：Number

• Rotate right：需要一个正数（degree > 0）
• Rotate left：需要一个负数（degree < 0）

旋转一幅图片，需要CSS3 Transforms3d的支持（IE10+）：

$().cropper(``'rotate'``, 90)``$().cropper(``'rotate'``, -90

enable()：使cropper可用。

disable()：冻结cropper。

reset()：重置剪裁区域的图片到初始状态。

clear()：清空剪裁区域。

replace(url)：

url：``替换图片的URL重建cropper。``类型：String``一个新的图片URL

getData()：

返回值：``类型：Object``属性：``x：剪裁区域左侧的偏移。``y：剪裁区域距上部的偏移。``width：剪裁区域的宽度。``height：剪裁区域的高度。``rotate：图片的旋转角度。``请参考实例效果

getContainerData()：

返回值：``类型：Object``属性：``width：容器的当前宽度。``height：容器的当前高度。``输出容器尺寸数据。

getImageData()：

返回值：

类型：Object

属性：``left：图片的左侧偏移。``top：图片的上部偏移。``width：图片的宽度。``height：图片的高度。``输出图片的位置和尺寸大小。

getCanvasData()：

返回值：``类型：Object``属性：``left：canvas的左侧偏移。``top：canvas的上部偏移。``width：canvas的宽度。``height：canvas的高度。``输出canvas（图片容器）的位置和尺寸大小。

setCanvasData(data)：

返回值：``类型：Object``属性：``left：canvas的距离左侧新的偏移。``top：canvas的距离上部新的偏移。``width：canvas新的宽度。``height：canvas新的高度。``改变canvas（图片容器）的位置和尺寸大小。

getCropBoxData()：

返回值：``类型：Object``属性：``left：剪裁区域距离左侧的偏移。``top：剪裁区域距离上部的偏移。``width：剪裁区域的宽度。``height：剪裁区域的高度。``输出剪裁区域的位置和尺寸大小。

setCropBoxData(data)：

返回值：``类型：Object``属性：``left：剪裁区域距离左侧新的偏移。``top：剪裁区域距离上部新的偏移。``width：剪裁区域新的宽度。``height：剪裁区域新的高度。``改变剪裁区域的位置和尺寸大小。

getCroppedCanvas([options])：

参数（默认值）：``类型：Object``属性：``width：输出的canvas目标宽度。``height：输出的canvas目标高度。``fillColor：canvas中填充的颜色。``返回值：``类型：HTMLCanvasElement``一个画有剪裁图片的canvas。