最近做一个需求,是上传本地图片,然后对其进行裁剪,转base64,发送到后台接口做只能解析
原理:
使用
然后就在github上找到了一个(https://github.com/IFmiss/wx-cropper),但是使用发现有几个问题
1:在安卓手机有卡顿现象
2:本地转base64有时候需要时间很久,而且网上提供js源码会压缩原图,导致图片质量下降,ios端还存在图片镜像问题
3:裁剪框会越界
4:图片初始化适配会有问题(小图片会被放大,大图会被缩小)
经过团队讨论最后放弃了前端转base64方案,然后对其他3个问题进行了修复
1:解决卡顿现象,加了对touchmove方法加了节流,这个只能用setTimeout,因为小程序不支持requestAnimationFrame
2:放弃前端转base64。直接传图片去接口
3:控制left和width值,代码就不上了
4:略
图片裁剪原理:
1:先选取图片,然后放在image标签中展示
2:设计裁剪框样式,初始化大小
3:除非touch事件改变裁剪框位置和大小,计算边界值
4:根据计算好的坐标位置和图片宽高,利用canvas进行裁剪就OK了
这里有个很大的坑,千万不能把图片初始化放在canvas里,因为小程序里的canvas不能自定义层级(z-index);默认是最顶层