• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之 图片裁剪

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序canvas生成二维码图片踩的坑发布时间:2022-07-18
下一篇:
微信小程序map组件z-index的层级问题发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap