cropper.js裁剪图片的使用

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
<!-- 建议把单独的img标签放在一个div中 包裹画布-->
<div class="box">
  <img id="image" src="picture.jpg">
这里注意，直接设置img的宽高是没有效果的，但是可以在父盒子上（即.box）设置
官方引入方式
    var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
            console.log(e.detail.width);
            console.log(e.detail.height);
            console.log(e.detail.rotate);
            console.log(e.detail.scaleX);
            console.log(e.detail.scaleY);
本地引入方式
如果使用的是本地的cropper.js和cropper.css，可能报版本的错误，用下面的引入代码：
    $('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e);
参数 options
viewMode：定义cropper的视图模式

0：没有限制，3可以移动到2外。

1 : 3只能在2内移动。

2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）

3：2图片填充整个1
replace(url[, onlyColorChanged])：替换图像的src并重新构建cropper

url：类型String，新图片的url

onlyColorChanged (optional)：类型Boolean，默认false；

如果只是改变颜色，而不是大小，那么cropper只需要改变所有相关图像的src，不需要重新构建cropper。这可以用于应用过滤器。（意思是：改成true，图像的比例会发生变化自适应父盒子的大小；会失真的）
    $("#replace").on("click", function () {
        $('#image').cropper('replace',"./images/111.jpeg",true );
enable()：解锁，锁定的裁切框（与disable相对应）
disable()：锁定的裁切框（裁切框不可移动）（与enable相对应）
destroy()：销毁cropper并从图像中删除整个cropper
move(offsetX[, offsetY])：使用相对偏移量移动图像(裁切框不移动)
moveTo(x[, y])：将画布(图像包装器)移动到一个绝对点
zoom(ratio)：放大图片，并使用相对比例（裁切框不变化）
zoomTo(ratio)：将画布(图像包装器)放大到一个绝对比例
rotate(degree)：旋转图像以一定的角度
rotateTo(degree)：旋转图像到固定的角度
scale(scaleX[, scaleY])：翻转图像

scaleX：类型Number；水平方向翻转；默认为 1

scaleY：类型Number；垂直方向翻转；如果不存在，其值和scaleX相同；
$('#image').cropper('scale', -1); // 水平、垂直方向翻转
$('#image').cropper('scale', -1, 1); // 水平方向翻转
$('#image').cropper('scale', 1, -1); // 垂直方向翻转
scaleX(scaleX)：缩放图像的横坐标
scaleY(scaleY)：缩放图像的纵坐标
getData([rounded])：输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小)

rounded 类型Boolean；默认false；设置true可以获取其所有数据；

返回的数据类型：Object；

x裁切框距离左边的距离

y裁切框距离顶部的距离

width裁切框的宽度

height裁切框的高度

rotate裁切框的旋转的角度

scaleX缩放图像的横坐标

scaleY缩放图像的纵坐标
    $("#getData").on("click", function () {
        console.log($('#image').cropper('getData', true));;
    $("#getImageData").on("click", function () {
        console.log($('#image').cropper('getImageData', ));;
getCanvasData()：输出画布Canvas(图像包装器)位置和大小数据

返回的数据类型：Object；

leftcanvas距离左边的距离

topcanvas距离顶部的距离

widthcanvas的宽度

heightcanvas的高度

naturalWidth canvas的原始宽度

naturalHeight canvas的原始高度

注意：getImageData() 和 getCanvasData()的naturalWidth、naturalHeight的值是一样的
setCanvasData(data)：使用数据更改画布Canvas(图像包装器)位置和大小
getCropBoxData()：输出剪切框的位置和大小数据
setCropBoxData(data)：改变剪切框的位置和大小数据
getCroppedCanvas([options])：画一张剪裁的图片，如果没有剪裁，则返回一个绘制整个im的画布

options 类型Object

width 输出Canvas的宽度

height 输出Canvas的高度

minWidth 输出Canvas的最小宽度；默认值是0

minHeight 输出Canvas的最小高度；默认值是0

maxWidth 输出Canvas的最大宽度；默认值是Infinity（无穷大）

maxHeight 输出Canvas的最大高度；默认值是Infinity（无穷大）

fillColor 在输出画布Canvas中填充任何alpha的颜色，默认值是透明的

imageSmoothingEnabled 如果图像被设置为平滑(true，默认)或不设置(false)。

imageSmoothingQuality 设置图像的质量，一个“low”(默认)、“medium”或“high”。

返回值类型：HTMLCanvasElement

画布绘制出了剪裁过的图像

注意：输出canvas画布的宽高比将自动适应剪切框的纵横比

如果您打算从输出画布canvas中获得一个JPEG图像，您应该首先设置填色选项，否则，JPEG图像中的透明部分将在缺少情况下变为黑色。

为了避免获得空白的输出图像，您可能需要将maxWidth和maxHeightproperties设置为有限的数字，从而来画布元素的大小限制。
    $("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的图片格式
        console.log(base64url); //生成base64图片的格式
        $('.cavans').html(cas)  //在body显示出canvas元素
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();
  formData.append('croppedImage', blob);
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    error: function () {
      console.log('Upload error');
setAspectRatio(aspectRatio)：改变裁切框的宽高比
setDragMode([mode])：设置拖拽模式

就是鼠标显示的是十字还是那种带箭头的十字

mode 类型String

取值：none、crop、move；

默认none
Events事件
ready：当一个cropper实例完全构建时，这个事件就会发生
cropstart：当画布(图像包装器)或剪切框开始发生变化时，该事件就会发生

返回的参数有：

event.originalEvent 类型event；

mousedown、touchstart 和 pointerdown  即触发的事件源

event.action 发生事件的行为（移动的方向）：

crop：创建一个剪切框的时候

move：移动图片的时

zoom：放大缩小canvas的时候

e：调整剪切框东侧的大小

w：调整剪切框西侧的大小

s：调整剪切框南侧的大小

n：调整剪切框北侧的大小

se：东南

sw：西南

ne：东北

nw：西北

all：所有方向
$('#image').on('cropstart', function (e) {
  console.log(e.type); // cropstart
  console.log(e.namespace); // cropper
  console.log(e.action); // ...
  console.log(e.originalEvent.pageX);
  // Prevent to start cropping, moving, etc if necessary
  if (e.action === 'crop') {
    e.preventDefault();
cropmove：当画布(图像包装器)或剪切框正在发生变化时，该事件就会发生
cropend：当画布(图像包装器)或剪切框正在发生变化结束时，该事件就会发生
crop：当画布(图像包装器)或农作物盒发生改变时，该事件就会发生
zoom：当一个cropper实例开始放大或缩小画布(图像包装器)时，这个事件就会发生