小程序自定义拖拽及裁剪

 背景需求

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

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

查看视频演示

看完后 我们来分析一下 

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

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

误区

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

纠正

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

看下页面使用代码

    
      
        
          
          图片处理中
        

        
          
            
              
                
                  
                
              
            
          
        
         {{ vdata.current }}/{{ vdata.imgUrl.length }} 
      
    
    
      
    

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

就以vue版本为例吧

遇到的坑及注意事项

1.封装组件时 外围盒子要定位

2.移动时，移动点位有偏差 （这里是100%等比例缩放的 如果自定义navbar需要减去所有以外的padding,margin,height）

3.一个页面反反复复使用 会遇到报错（canvas id已经使用了 不能再次使用） 动态设置cancasId

4.框选回显，坐标点位有偏差（始终保持图片大小等比例缩放 回显坐标不能使用px 最好使用%）

5.通过createSelectorQuery获取高度时，没有获取到 设置setTimerOut获取

这是welCropper所有的template代码 可以尝试根据代码去反推逻辑，有兴趣的小伙伴可以私信我或加wx：Darren_jm  备注csdn 获取全部代码