js截取图片裁剪图片之cropper.js插件用法详解

蔚落 2023-02-20 08:23 2阅读 0赞

# js截取图片 裁剪图片之cropper.js插件用法详解 #

--------------------

*源码：[https://github.com/fengyuanchen/cropper][https_github.com_fengyuanchen_cropper]*

# 引入+使用 #

HTML结构

<div class="box">
      <img id="image" src="picture.jpg">
    </div>

> 这里注意，直接设置`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；就会报错（绝对的版本号的问题v1.x版本），而使用cdn方法报错就可以解除；  
[cdn的链接][cdn]；如果使用本地的文件（v3.x版本）则写法变为

$('#image').cropper({
            aspectRatio: 16 / 9,
            viewMode:1,
            crop: function (e) {
                console.log(e);
            }
        });

一个简单的demo就出现了；效果图  
![这里写图片描述][SouthEast]；

# 参数options #

1.  viewMode—定义cropper的视图模式
    
    > 类型:number；默认：0；可以使用0,1,2,3；  
    > ![这里写图片描述][SouthEast 1]  
    > 0：没有限制，3可以移动到2外。  
    > 1 : 3只能在2内移动。  
    > 2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）  
    > 3：2图片填充整个1
2.  dragMode —-定义cropper的拖拽模式。
    
    > 类型: String  
    > 默认: ‘crop’  
    > 选项:  
    > ‘crop’: 可以产生一个新的裁剪框3  
    > ‘move’: 只可以移动3  
    > ‘none’: 什么也不处理
3.  aspectRatio—-裁剪框的宽高比
    
    > 类型:number；默认：NAN；  
    > 在默认的时候。可以随意改变裁剪框的大小；我这里的设置的值为 16/9;
4.  data—如果您已经存储了以前的数据，那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)
    
    > 类型:`object`；默认：null；
5.  preview—-添加额外的元素(容器)以供预览
    
    > 类型：Element / String 默认：“ ”；  
    > 注意这里是一个dom元素。必须可以被`Document.querySelectorAll`获取到；  
    > `preview:".small",`  
    > HTML结构：`<div class="small"></div>`；注意一定要设置`small`的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式`overflow: hidden;`  
    > ![这里写图片描述][SouthEast 2]  
    > 去掉`overflow: hidden;`效果图如下：  
    > ![这里写图片描述][SouthEast 3]  
    > 感觉成了一个放大镜；
6.  responsive—在调整窗口大小的时候重新渲染cropper
    
    > 类型：`Boolean` 默认：true；
7.  restore—在调整窗口大小后恢复裁剪的区域。
    
    > 类型：`Boolean` 默认：true；
8.  checkCrossOrigin—-检查当前图像是否为跨域图像。
    
    > 类型：`Boolean` 默认：true；
9.  checkOrientation—-检查当前图像的Exif定向信息。（不知道干什么用的）
    
    > 类型：`Boolean` 默认：true；  
    > 好像是移动端选择发生旋转变化的时候，触发的事件。
10. modal—显示图片上方的黑色模态并在裁剪框下面。
    
    > 类型：`Boolean` 默认：true；  
    > 改成false效果图为：  
    > ![这里写图片描述][SouthEast 4]
11. guides—显示在裁剪框上方的虚线。
    
    > 类型：`Boolean` 默认：true；  
    > 改成false效果图为：  
    > ![这里写图片描述][SouthEast 5]
12. center—裁剪框在图片正中心。
    
    > 类型：`Boolean` 默认：true；
13. highlight–在裁剪框上方显示白色的区域(突出裁剪框)。
    
    > 类型：`Boolean` 默认：true；
14. background–显示容器的网格背景。（就是后面的马赛克）
    
    > 类型：`Boolean` 默认：true；
15. autoCrop–当初始化时，可以自动生成图像。（就是自动显示裁剪框，改成false裁剪框自动消失）
    
    > 类型：`Boolean` 默认：true；  
    > 改成false效果图为：  
    > ![这里写图片描述][SouthEast 6]
16. autoCropArea–定义自动裁剪面积大小(百分比)和图片进行对比。
    
    > 类型：`number` 默认：0.8；  
    > 就是裁剪框显示的大小
17. movable–是否允许可以移动后面的图片
    
    > 类型：`Boolean` 默认：true；
18. rotatable–是否允许旋转图像。
    
    > 类型：`Boolean` 默认：true；
19. scalable–是否允许缩放图像。
    
    > 类型：`Boolean` 默认：true；
20. zoomable–是否允许放大图像。
    
    > 类型：`Boolean` 默认：true；
21. zoomOnTouch–是否可以通过拖动触摸来放大图像。
    
    > 类型：`Boolean` 默认：true；
22. zoomOnWheel–是否可以通过移动鼠标来放大图像。
    
    > 类型：`Boolean` 默认：true；
23. wheelZoomRatio–用鼠标移动图像时，定义缩放比例。
    
    > 类型：`Number` 默认：0.1；
24. cropBoxMovable—是否通过拖拽来移动剪裁框。
    
    > 类型：`Boolean` 默认：true；  
    > 改成false效果图为：剪裁框不可以拖动。
25. cropBoxResizable—是否通过拖动来调整剪裁框的大小。
    
    > 类型：`Boolean` 默认：true；  
    > 改成false效果图为：剪裁框不可以调整大小。
26. toggleDragModeOnDblclick—当点击两次时可以在“crop”和“move”之间切换拖拽模式，
    
    > 类型：`Boolean` 默认：true；
27. minContainerWidth—容器的最小宽度。
    
    > 类型：`Number` 默认：200；
28. minContainerHeight—容器的最小高度。
    
    > 类型：`Number` 默认：100；
29. minCanvasWidth—canvas的最小宽度。
    
    > 类型：`Number` 默认：0；
30. minCanvasHeight—canvas的最小高度。
    
    > 类型：`Number` 默认：0；
31. minCropBoxWidth—裁剪层的最小宽度。
    
    > 类型：`Number` 默认：0；
32. minCropBoxHeight—裁剪层的最小高度。
    
    > 类型：`Number` 默认：0；
33. ready—插件准备完成执行的函数（只执行一次）。
    
    > 类型：`Function` 默认：`null`；
34. cropstart—剪裁框开始移动执行的函数。
    
    > 类型：`Function` 默认：`null`；
35. cropmove—剪裁框移动时执行的函数。
    
    > 类型：`Function` 默认：`null`；
36. cropend—剪裁框移动结束执行的函数。
    
    > 类型：`Function` 默认：`null`；
37. crop—剪裁框发生变化执行的函数。
    
    > 类型：`Function` 默认：`null`；
38. zoom—剪裁框缩放的时候执行的函数。
    
    > 类型：`Function` 默认：`null`；

$('#image').cropper({
            aspectRatio: 16 / 9,
            viewMode:1,
            dragMode:'none',
            preview:".small",
            responsive:false,
            restore:false,
    //        modal:false,
    //        guides:false,
    //        background:false,
    //        autoCrop:false,
    //        autoCropArea:0.1,
    //        movable:false,
    //        scalable:false,
    //        zoomable:false,
    //        wheelZoomRatio:false,
    //        cropBoxMovable:false,
    //        cropBoxResizable:false,
            ready:function () {
                console.log("ready");
            },
            cropstart: function (e) {
                console.log("cropstart");
            },
            cropmove: function (e) {
                console.log("cropmove");
            },
            cropend: function (e) {
                console.log("cropend");
            },
            crop: function (e) {
                console.log("crop");
            },
            zoom: function (e) {
                console.log("zoom");
            },
        });

![这里写图片描述][SouthEast 7]

# Methods 方法 #

> 使用方法示例：

$().cropper({
      ready: function () {
        $().cropper('method', argument1, , argument2, ..., argumentN);
      }
    });

1.  crop() 手动显示裁剪框

$("#image").cropper({
      autoCrop: false, //关闭自动显示裁剪框
      ready: function () {
        $(this).cropper('crop');
      }
    });

2 . reset()—-将图像和裁剪框重置为初始状态

<button id="reset">reset</button>
    //-----------------------------
    $("#reset").on("click", function () {
            $('#image').cropper('reset');
       })

3 . clear()—清除裁切框

$("#clear").on("click", function () {
            $('#image').cropper('clear');
        })

4 . 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 );
        })

![这里写图片描述][SouthEast 8] ![这里写图片描述][SouthEast 9]

5 . enable()—解锁，锁定的裁切框（与disable相对应）

$("#enable").on("click", function () {
            $('#image').cropper('enable');
        })

6 . disable()—锁定的裁切框（裁切框不可移动）（与enable相对应）

$("#disable").on("click", function () {
            $('#image').cropper('disable');
        })

7 . destroy()—销毁cropper并从图像中删除整个cropper。

$("#destroy").on("click", function () {
            $('#image').cropper('destroy');
        })

8 . move(offsetX\[, offsetY\])—使用相对偏移量移动图像(裁切框不移动)。

> offsetX–类型：`Number`；在水平方向上移动（px）  
> offsetY –类型：`Number`；在垂直方向上移动（px）；如果不存在，其值和offsetX相同；

$("#move1").on("click", function () {
            $('#image').cropper('move', 1, 0);
        })
        $("#move2").on("click", function () {
            $('#image').cropper('move', 0, -1);
        })

9 . moveTo(x\[, y\])—-将画布(图像包装器)移动到一个绝对点

> X–类型：`Number`；画布canvas距离left的值；  
> Y –类型：`Number`；画布canvas距离top的值；如果不存在，其值和X相同；

10 . zoom(ratio)—放大图片，并使用相对比例。（裁切框不变化）

$('#image').cropper('zoom', 0.1);
    $('#image').cropper('zoom', -0.1);

11 . zoomTo(ratio)—-将画布(图像包装器)放大到一个绝对比例

> ratio:类型`Number`—要放大的比例

$('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)

12 . rotate(degree)—旋转图像以一定的角度

> degree—类型: `Number`  
> 向右旋转 (degree > 0)；向左旋转 (degree < 0)；

$('#image').cropper('rotate', 90);
    $('#image').cropper('rotate', -90);

13 . rotateTo(degree)—旋转图像到固定的角度

> degree—类型: `Number`

14 . scale(scaleX\[, scaleY\])—-翻转图像

> scaleX–类型：`Number`；水平方向翻转；默认为 1  
> scaleY–类型：`Number`；垂直方向翻转；如果不存在，其值和scaleX相同；

$('#image').cropper('scale', -1); // 水平、垂直方向翻转
    $('#image').cropper('scale', -1, 1); // 水平方向翻转
    $('#image').cropper('scale', 1, -1); // 垂直方向翻转

15 . scaleX(scaleX)—-缩放图像的横坐标。

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

16 . scaleY(scaleY)—-缩放图像的纵坐标。

> 类型：`Number`；垂直方向翻转；默认为 1

$('#image').cropper('scaleX', 1);

17 . getData(\[rounded\])—-输出最终裁剪的区域位置和大小数据(根据原始图像的自然大小

> rounded 类型：`Boolean` 默认：`false`；设置true可以获取其所有数据；  
> 返回的数据类型：`Object`；  
> \- `x`裁切框距离左边的距离  
> \- `y`裁切框距离顶部的距离  
> \- `width`裁切框的宽度  
> \- `height`裁切框的高度  
> \- `rotate`裁切框的旋转的角度  
> \- `scaleX`缩放图像的横坐标  
> \- `scaleY`缩放图像的纵坐标  
> ![这里写图片描述][SouthEast 10]

$("#getData").on("click", function () {
            console.log($('#image').cropper('getData', true));;
        })

![这里写图片描述][SouthEast 11]  
18 . setData(data)—用新数据改变裁切区域的位置和大小(以原始图像为基础)。

> data–类型：`Object`；

$("#setData").on("click", function () {
            $('#image').cropper('setData',{width:200,height:100});
        })

19 . getContainerData()—输出container 容器大小数据。

> 返回的数据类型：`Object`；
> 
>  *  width当前容器的宽
>  *  height当前容器的高

![这里写图片描述][SouthEast 12]

$("#getContainerData").on("click", function () {
            console.log($('#image').cropper('getContainerData', ));;
        })

![这里写图片描述][SouthEast 13]  
20 . getImageData()—-输出图像image位置、大小和其他相关数据。

> 返回的数据类型：`Object`；  
> \- `left`image距离左边的距离  
> \- `top`image距离顶部的距离  
> \- `width`image的宽度  
> \- `height`image的高度  
> \- `naturalWidth` image的原始宽度  
> \- `naturalHeight` image的原始高度  
> \- `aspectRatio` image的纵横比  
> \- `rotate`image的旋转的角度  
> \- `scaleX`缩放图像的横坐标  
> \- `scaleY`缩放图像的纵坐标

$("#getImageData").on("click", function () {
            console.log($('#image').cropper('getImageData', ));;
        })

![这里写图片描述][SouthEast 14]  
21 . getCanvasData()—输出画布Canvas(图像包装器)位置和大小数据。

> 返回的数据类型：`Object`；  
> \- `left`canvas距离左边的距离  
> \- `top`canvas距离顶部的距离  
> \- `width`canvas的宽度  
> \- `height`canvas的高度  
> \- `naturalWidth` canvas的原始宽度  
> \- `naturalHeight` canvas的原始高度

![这里写图片描述][SouthEast 15]；  
\*注意\*getImageData（）和getCanvasData()的`naturalWidth`、`naturalHeight`的值是一样的；  
22 . setCanvasData(data)—：使用数据更改画布Canvas(图像包装器)位置和大小。

> 返回的数据类型：`Object`；  
> \- `left`canvas距离左边的距离  
> \- `top`canvas距离顶部的距离  
> \- `width`canvas的宽度  
> \- `height`canvas的高度

$("#setCanvasData").on("click", function () {
            $('#image').cropper('setCanvasData',{width:200,height:100});
        })

23 .getCropBoxData()—输出剪切框的位置和大小数据。

> 返回的数据类型：`Object`；  
> \- `left`剪切框距离左边的距离  
> \- `top`剪切框距离顶部的距离  
> \- `width`剪切框的宽度  
> \- `height`剪切框的高度

$("#getCropBoxData").on("click", function () {
            console.log($('#image').cropper('getCropBoxData'));;
        })

![这里写图片描述][SouthEast 16]  
24 . setCropBoxData(data)—–改变剪切框的位置和大小数据。

> data的数据类型：`Object`；  
> \- `left`剪切框距离左边的距离  
> \- `top`剪切框距离顶部的距离  
> \- `width`剪切框的宽度  
> \- `height`剪切框的高度

$("#setCropBoxData").on("click", function () {
            $('#image').cropper('setCropBoxData',{width:200,height:100});
        })

25 . 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元素
        })

![这里写图片描述][SouthEast 17] ![这里写图片描述][SouthEast 18]

$('#image').cropper('getCroppedCanvas', {
      width: 160,
      height: 90,
      minWidth: 256,
      minHeight: 256,
      maxWidth: 4096,
      maxHeight: 4096,
      fillColor: '#fff',
      imageSmoothingEnabled: false,
      imageSmoothingQuality: 'high',
    });
    
    // 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');
        }
      });
    });

26 . setAspectRatio(aspectRatio)—改变裁切框的宽高比。

> aspectRatio:类型`number`；是一个正数

$("#setAspectRatio").on("click", function () {
            $('#image').cropper('setAspectRatio',1/1);
        })

27 . 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—当画布(图像包装器)或剪切框正在发生变化时，该事件就会发生；

> 返回的参数有`event.originalEvent:`；类型`event`；参数： `mousemove`, `touchmove` 和 `pointermove` ；即触发的事件源  
> `event.action:`：发生事件的行为（移动的方向） 和 `cropstart`的相同

cropend—当画布(图像包装器)或剪切框正在发生变化结束时，该事件就会发生；

> 返回的参数有`event.originalEvent:`；类型`event`；参数： `mouseup`, `touchend`、`pointerup` 、`pointercancel`和 `touchcancel` ；即触发的事件源  
> `event.action:`：发生事件的行为（移动的方向） 和 `cropstart`的相同

crop—当画布(图像包装器)或农作物盒发生改变时，该事件就会发生。

>  *  event.x
>  *  event.y
>  *  event.width
>  *  event.height
>  *  event.rotate
>  *  event.scaleX
>  *  event.scaleY  
>     这些参数的含义去参照`getData`；

zoom—当一个cropper实例开始放大或缩小画布(图像包装器)时，这个事件就会发生。

> 返回的参数有  
> `event.originalEvent:`；类型`event`；参数： `wheel`, `touchmove` ；即触发的事件源  
> `event.oldRatio:`类型`number`；当前canvas的裁切比例  
> `event.ratio:`类型`number`；新的canvas的裁切比例`(canvasData.width / canvasData.naturalWidth)`

$().on('zoom', function (e) {
    
      // Zoom in
      if (e.ratio > e.oldRatio) {
    
        // Prevent zoom in
        e.preventDefault();
      }
    
      // Zoom out
      // ...
    });

最后女神镇楼  
![这里写图片描述][SouthEast 19]  
自己写的比较好理解；  
究极的demo  
![这里写图片描述][SouthEast 20]  
代码下载地址：[https://github.com/melodyne/cropper][https_github.com_melodyne_cropper]

[https_github.com_fengyuanchen_cropper]: https://github.com/fengyuanchen/cropper/blob/master/README.md
[cdn]: https://cdnjs.com/libraries/cropperjs
[SouthEast]: https://img-blog.csdn.net/20171213154615081?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: https://img-blog.csdn.net/20171213161043763?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 2]: https://img-blog.csdn.net/20171213164317298?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: https://img-blog.csdn.net/20171213164452815?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: https://img-blog.csdn.net/20171213170629395?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 5]: https://img-blog.csdn.net/20171213171522726?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 6]: https://img-blog.csdn.net/20171213172910219?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 7]: https://img-blog.csdn.net/20171213200938933?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 8]: https://img-blog.csdn.net/20171214101057326?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 9]: https://img-blog.csdn.net/20171214101113850?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 10]: https://img-blog.csdn.net/20171214111128948?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 11]: https://img-blog.csdn.net/20171214111053762?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 12]: https://img-blog.csdn.net/20171214112220807?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 13]: https://img-blog.csdn.net/20171214112042918?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 14]: https://img-blog.csdn.net/20171214113013804?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 15]: https://img-blog.csdn.net/20171214113537807?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 16]: https://img-blog.csdn.net/20171214123613452?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 17]: https://img-blog.csdn.net/20171214141944512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 18]: https://img-blog.csdn.net/20171214142000975?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 19]: https://img-blog.csdn.net/20171214153748522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 20]: https://img-blog.csdn.net/20171214154140072?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[https_github.com_melodyne_cropper]: https://github.com/melodyne/cropper