layUI框架通过Cropperjs实现上传图片裁剪

最近项目需求要实现上传图片并能裁剪的功能，项目框架使用layUI，于是乎，各种找度娘翻资料发现大家都极力推荐cropper组件实现截取(裁剪)上传，于是我也选择了它。

业务需求是这样的：前端实现图片上传裁剪并将裁剪后图片转换为base64位编码通过ajax传给后台,后台再将base64位编码生成图片路径返回给前台展示。

第一步：下载layUI官网提供的扩展组件cropper到本地，地址(https://fly.layui.com/extend/croppers/)

第二步：将下载的文件放到项目中相应的目录，页面做引用。（头部引用css，尾部引用js）

第三步：在当前页的html页中增加点击事件id。在当前页的js文件中引入组件，并在当前页的js文件中创建一个头像上传组件，

第四步：这里我偷了懒，直接在组件修改的，首先在croppers.js中引入配置文件cropperjs,之后定义相应的模块，这里html可根据自己设计图效果做适当修改优化

第五步：由于使用这个组件默认上传的图片返回的总是原图的base64位编码，所以我使用cropper.js中绘制的canvas方法中增加了个变量来获取绘制裁剪之后的64位编码

canvas可使用toDataURL('image/jpeg'); 获取到base64位编码

getdataURL=canvas.toDataURL('image/jpeg'); 

第六步：选择图片裁剪区域，获取到getdataURL统过ajax提交给后台

最终实现的效果如图，点击确定之后将裁剪后绘制的base64位编码传给后台