前端图片裁剪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())

//纯客户端的裁切使用getCroppedCanvas 获取裁切的文件对象（低版本的ie不支持）
this.cropper.getCroppedCanvas().toBlob(blob => {
	const formData = new FormData()
	formData.append('photo',blob)
	//直接把formData发送个后端接口就可以了	
})

然后接口请求成功会返回一个http地址的图片，然后我们把头像图片替换就可以了；
这样就实现了更换头像裁切的功能；

工作之余 用博客记录自己 希望有能帮助到各位看官
如有错误或不全面的地方望各位能提点一二和留下宝贵意见