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方法即可得到快照地址