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

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

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

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

3.具体实现

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

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

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

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

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

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

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