vue-cropper问题以及解决方案

Vue项目重构完成！！！~~~~(*0*)!!!

项目中用到了截图插件因为老项目用的cropper.js。所以首选在github上就搜了vue-cropper。

开发中也遇到了很多问题，总结一下。

1：截图框截出来的图只能是框这么大，要想放大就必须拉大截图框。

2：截图框的左上角到图片左上角的坐标以及框的宽高。（需要传到后台根据四个参数来定位截取图片）

解决方法》》》》

　1：因为vue-cropper是对cropper.js的一个阉割版。所以很多cropper.js的功能并没有集成实现、所以我们退而求其次

　　为了用户（客服）能够实时查看截图的区域，我们通过

　　 this.$refs.cropper.getCropData((img) => {console.log(img)}); 

　　这种方式来获取到了截取的图片的base64格式。并展示在截图显示框内。

　　缺点：因为每次拖动都会获取base64格式的图片，所以并没有原来的实时显示流畅，网络状况不好的时候会有卡顿感觉。

　2：坐标以及截图框宽高的问题

　　最开始获取坐标，

let imgAxis = this.$refs.cropper.getImgAxis();    //图片左上角到容器左上角的坐标
let cropAxis = this.$refs.cropper.getCropAxis();    //截图框左上角到容器左上角的坐标

　　

　　通过来个坐标的计算，可以得到截图框左上角的点到图片左上角的点的X轴和Y轴(坐标)。

　　接下来是获取截图框的宽高（这个比较基础），在realTime(data) 中data对象里面有存。

　　但是问题来了 后台拿到的东西是跟原图作比较（1080*1920），我们传过去的坐标以及框的宽高都是相对于现在的更改了尺寸的图片的，

　　我们找到了一个属性在realTime(data) data中data.img里面有正在截取的图片的信息。其中有个scale(2.9***, 2.9***)，通过字符串截取截取小数点后三位数。在对拿到的坐标和矿的宽高做了放大处理，传到后台拿到图片一看  完美。

　　总结一点就是！百度到的文档说明都是翻译或者转义的github作者写的。有可能不全或者曲解。所以还是直奔作者写的readme.txt！！

　　还有我们公司的一句名言，也是我们所有开发组的名言--

　　　　完成比完美更重要