微信小程序之 图片裁剪

时间:2024-03-09 14:55:55

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