微信小程序之 图片裁剪

最近做一个需求，是上传本地图片，然后对其进行裁剪，转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)；默认是最顶层

转载于:https://www.cnblogs.com/since9111/p/9486704.html