前端图片裁剪cropper.js

背景：我们在项目中常常都会有更换登陆人头像的需求，这个很简单直接上传一张图片展示就可以了，但是如果上传的图片需要剪裁成正方形的话就需要我们来做一些特殊的处理；

这里我们会用到一个图片剪裁插件：cropper.js

github地址：https://github.com/fengyuanchen/cropperjs
在github中有插件初始化的代码大家按部就班到自己的项目中，先实现初始化看看样子；
我这里针对于cropper.js插件做一些特殊的配置，实现正方形裁切；
代码：

const image = this.$refs.img //获取图片元素
const cropper = new Cropper(image,{
      viewMode: 1, //裁切框的位置，0可以选择图片外，1只能在图片内
      dragMode: 'move',  //拖动方式，crop、move、none
      aspectRatio: 1,  //截取的比例
      autoCropArea: 1, //撑满画布
      cropBoxMovable: false, //截取框不可移动
      corpBoxResizable: false, //截取框缩放功能
      background: false, //背景
      movable: true //画布是否可以移动
    })

裁切后的图片如何处理？下面有两种方式。
代码：

//一种是基于服务端进行裁切getData 方法获取裁切参数，（兼容性好）
// console.log(this.cropper.getData())

//纯客户端的裁切使用get