ReactNative选择头像裁剪截屏生成新头像并保存到本地

1.需求 需要根据不同等级展示不同的头像边框 用户可以选择头像 然后裁剪合成 变成带边框的头像 并且可以下载到本地

2.实现思路 用户进来选择头像(使用react-native-image-crop-picker)之后 将头像和边框(react-native-view-shot)进行快照 保存到临时路径 点击下载 (使用@react-native-community/cameraroll)保存到本地相册 需要注意的是 图片加载需要时间所以要在图片加载完之后再进行快照

3.具体实现

1.用户选择头像 使用裁剪库 选择完之后 用户可以旋转裁剪图片 将得到的路径存至state

2.因为需求需要选择完头像之后 更换用户头像 所以 在image onLoad事件里 进行截屏 然后上传到服务器 修改用户头像 必须等图片加载完成否则可能截不到

3.加载完成之后 直接调用 viewshot的capture方法即可得到快照地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值