cropper固定宽高裁剪_cropper实现基本的裁剪图片并上传

使用cropper之前需要先引用 cropper.css 和 cropper.js

cropper 官网：https://fengyuanchen.github.io/cropper/

cropper.css下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/css

cropper.js下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/js

然后我们来了解一下cropper的基本属性及方法

参数options

1. viewMode(定义cropper的视图模式)

类型:number；默认：0；可以使用0,1,2,3；

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方法。(具体怎么用还不知道)

5.preview—-添加额外的元素(容器)以供预览

类型：Element / String 默认：“ ”；

注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到；

preview:".small",

HTML结构：

6. center—裁剪框在图片正中心。

7. background–显示容器的网格背景。(就是后面的马赛克)

8.rotatable–是否允许旋转图像。

9. scalable–是否允许缩放图像。

10. zoomable–是否允许放大图像。

11. ready—插件准备完成执行的函数(