移动端Vue下使用Cropper.js + 原生js实现图片裁剪异步上传功能

Cropper是一个同时支持PC端和移动的图片裁剪工具，这次公司业务需要，所以研究使用了一波，感觉很强大，下面是主流程步骤解析和部分业务源码

一、主要流程

1. input[type='file']获取图片 
2. 实例化new FileReader().readAsDataURL读取input图片，回调结果绑定给img标签显示图片
3. 调用Cropper实例传入两个参数第一个是img dom，第二个是可选配置参数(稍后介绍)
4. 确定裁剪
   1. 调用cropper.getCroppedCanvas().toBlob( blob => {}) 获取截图后的Blob对象
   2. new File([blob]) 生成file对象
   3. new FormData().append('file', file) 放入form表单
   4. ajax form表单上传

 

二、分步代码解析

1.in