背景:
应微信官方通知(https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01?blockType=1),即将收回getUserProfile,并且官方推荐通过使用button的开放能力chooseAvatar来获取头像(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html),最近项目也在做相应的调整。
问题描述:
由于原有项目中,由于原先获取的微信头像都为正方形,且项目中显示头像的地方都为圆形,如下图1所示。现替换button的开放能力chooseAvata后,如下图2所示,选择”从相册选择“或者”拍照“时,得到的图片为长方形,这样获取到的图片,在项目中对应的头像显示或宽高比失调、或图片显示效果差(即设置image组建mode属性保持宽高比不变时,自动截取的部分图片不是用户想要的那个部分)。
图1:
图:2
需求分析:
基于以上的场景,查阅了图片相关的api,找到了wx.editImage,效果如下图1所示;倘若wx.editImage支持自定义裁剪比例就好了,遗憾的是wx.editImage的入参只有:src,success,fail,complete这四个,如下图2所示;GG,黔驴技穷了,总不能跟产品经理说,微信小程序相关api不支持,不予处理。一个好的api工程师是需要严格要求自己的。
图1:
图2:
小结:
作为一个严谨的程序员,希望官方大大能拉我一把,快帮帮孩子吧(wx.editImage,能不能加一些配置项啥的),也欢迎大家一起帮忙分析下,有没有啥其他的解决方案,欢迎留言哦~
https://developers.weixin.qq.com/community/develop/doc/000ca4b9bd0910e1757eb70cd51c01
官方已出适配方案(wx.cropImage),感谢以上回复~
几点有问题的地方
wx.cropImage 微信刚出了这个api了,这个api估计可以帮到你
uniapp 那边app端都这个功能,很好用
点击裁剪就可以了
网上一大堆小程序图片裁剪组件
mode="aspectFill",不严谨,虽然保持纵横比缩放图片,但是只保证图片的短边能完全显示出来。长边的截取控制不了,比如选中的图片中人脸如果在图片顶部位置,使用mode="aspectFill"的话,会导致显示不全整个人脸,如下图所示:
。。。你这个号是企业账号吧
点击裁剪就可以了