背景需求

 当时做小程序时 遇到一个场景 用户拍摄照片=>智能解析题目=>页面回显框选

回显后，可能不是用户想要的某一区域或某一题，此时就需要用户手动编辑裁剪。先看下图片效果及视频演示

查看视频演示

看完后 我们来分析一下 

做的时候 我的第一反应就是canvas和movable-area的组合 但是怎么尝试都没有成功。然后去百度查看，各种杂七乱八的，都没有达到自己想要实现的效果。然后我就请教之前有做过的大佬，他给的答案是vanvas结合movable-area组合

先聊一下框选回显的问题吧 

误区

动态获取放图片盒子的大小 然后比上手机屏幕的大小得到比例 根据返回的坐标点*比例 画出所有框选位置

纠正

动态获取盒子的高度（目的是后续裁剪使用）把对放图片盒子的操作 给Image操作 

看下页面使用代码

然后看下 welCropper 有两个版本 一个vue的版本 一个react的版本 

就以vue版本为例吧