cropper.js 裁剪图片并上传

小鱼儿 2021-08-19 11:40 554阅读 0赞

*官网[http://fengyuanchen.github.io/cropper/][http_fengyuanchen.github.io_cropper]*  
*文档[https://github.com/fengyuanchen/cropper/blob/master/README.md][https_github.com_fengyuanchen_cropper_blob_master_README.md]* –v3.x版本

# 引入+使用 #

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]  
代码下载地址[http://download.csdn.net/download/weixin\_38023551/10158550][http_download.csdn.net_download_weixin_38023551_10158550]

[http_fengyuanchen.github.io_cropper]: http://fengyuanchen.github.io/cropper/
[https_github.com_fengyuanchen_cropper_blob_master_README.md]: https://github.com/fengyuanchen/cropper/blob/master/README.md
[cdn]: https://cdnjs.com/libraries/cropperjs
[SouthEast]: /images/20210726/36d77745a0884cda8e930cf7ed9cca2c.png
[SouthEast 1]: /images/20210726/484fe695d8554caba1f89b264ce2997e.png
[SouthEast 2]: /images/20210726/10ecd2f7fecd49b48f5f00b26372a067.png
[SouthEast 3]: /images/20210726/54162130971442b9a632ef5708779b63.png
[SouthEast 4]: /images/20210726/d822d87a13b14326b1810a4bbda07a2b.png
[SouthEast 5]: /images/20210726/cb2ea76437344924ab6b1e18acb1cf77.png
[SouthEast 6]: /images/20210726/004bad87bfc14cb1a18230a075006b8b.png
[SouthEast 7]: /images/20210726/9017925aa7e04313b5296db50ea58059.png
[SouthEast 8]: https://img-blog.csdn.net/20171214101057326?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 9]: /images/20210726/be5b7d0daa824018b2580d9b0dd5ab01.png
[SouthEast 10]: /images/20210726/54af7ea26df8422198b85dbbd581827a.png
[SouthEast 11]: /images/20210726/412963dc5ce54e77977ad32e3ddd1379.png
[SouthEast 12]: /images/20210726/a455bfef751a484181088da35a3ce985.png
[SouthEast 13]: /images/20210726/ed9e13d2616d491890b867481163ea2b.png
[SouthEast 14]: /images/20210726/d4b852d464544306b10990362bc0cf6b.png
[SouthEast 15]: /images/20210726/56aa94f0faed428b8065770eb8ebd76b.png
[SouthEast 16]: /images/20210726/db220f4fc1e842f88778e9205cd99565.png
[SouthEast 17]: https://img-blog.csdn.net/20171214141944512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2VpeGluXzM4MDIzNTUx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 18]: /images/20210726/0603d6522af34c0da361b830c1d8b166.png
[SouthEast 19]: /images/20210726/a5d9fc8ed55e4395871da649b089110b.png
[SouthEast 20]: /images/20210726/223efb3628e24a9799836dd28a494c28.png
[http_download.csdn.net_download_weixin_38023551_10158550]: http://download.csdn.net/download/weixin_38023551/10158550