vue-cropper问题以及解决⽅案
Vue项⽬重构完成~~~~(*0*)
项⽬中⽤到了截图插件因为⽼项⽬⽤的cropper.js。所以⾸选在github上就搜了。
开发中也遇到了很多问题，总结⼀下。
1：截图框截出来的图只能是框这么⼤，要想放⼤就必须拉⼤截图框。
2：截图框的左上⾓到图⽚左上⾓的坐标以及框的宽⾼。（需要传到后台根据四个参数来定位截取图⽚）
解决⽅法》》》》
　1：因为vue-cropper是对cropper.js的⼀个阉割版。所以很多cropper.js的功能并没有集成实现、所以我们退⽽求其次
  为了⽤户（客服）能够实时查看截图的区域，我们通过
  1 this.$CropData((img) => {console.log(img)});
  这种⽅式来获取到了截取的图⽚的base64格式。并展⽰在截图显⽰框内。
  缺点：因为每次拖动都会获取base64格式的图⽚，所以并没有原来的实时显⽰流畅，⽹络状况不好的时候会有卡顿感觉。
　2：坐标以及截图框宽⾼的问题
  最开始获取坐标，
let imgAxis = this.$ImgAxis();    //图⽚左上⾓到容器左上⾓的坐标
字符串截取 js
let cropAxis = this.$CropAxis();    //截图框左上⾓到容器左上⾓的坐标
  通过来个坐标的计算，可以得到截图框左上⾓的点到图⽚左上⾓的点的X轴和Y轴(坐标)。
  接下来是获取截图框的宽⾼（这个⽐较基础），在realTime(data) 中data对象⾥⾯有存。
  但是问题来了后台拿到的东西是跟原图作⽐较（1080*1920），我们传过去的坐标以及框的宽⾼都是相对于现在的更改了尺⼨的图⽚的，
  我们到了⼀个属性在realTime(data) data中data.img⾥⾯有正在截取的图⽚的信息。其中有个scale(2.9***, 2.9***)，通过字符串截取截取⼩数点后三位数。在对拿到的坐标和矿的宽⾼做了放⼤处理，传到后台拿到图⽚⼀看完美。
  总结⼀点就是！百度到的⽂档说明都是翻译或者转义的github作者写的。有可能不全或者曲解。所以还是直奔作者写的！！
  还有我们公司的⼀句名⾔，也是我们所有开发组的名⾔--
    完成⽐完美更重要

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。