如何使用 react-native-camera 从相机胶卷 url 显示图像?
Posted
技术标签:
【中文标题】如何使用 react-native-camera 从相机胶卷 url 显示图像?【英文标题】:How to display Image from camera roll url using react-native-camera? 【发布时间】:2017-01-31 06:12:43 【问题描述】:我使用 react-native-camera 来捕获图像并将它们保存在 ios 设备的 cameraRoll (CaptureTarget) 中,在捕获时我得到以下形式的图像路径
"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"
如何使用该路径在 Image 组件中显示图片(来自 react-native)?
以前我使用磁盘作为 CaptureTarget 选项,我能够显示该图像 url Image 组件,但现在要求将图像保存在相机胶卷中?
【问题讨论】:
你解决了吗? @ajonno 请看我的回答 【参考方案1】:我已经使用RNFetchBlob从“assets-library://..”url获取base64,我的捕获函数是
this.camera.capture()
.then((data) =>
// console.log(data);
RNFetchBlob.fs.readFile(data.path, 'base64')
.then((base64data) =>
let base64Image = `data:image/jpeg;base64,$base64data`;
this.props.addImagesToUntagged(data.path);
)
)
之后,我在此 base64 数据上为用户提供了一些应用内功能,最后当我需要将其发送到 s3 服务器时,我使用 axios 和 RNFetchBlob 发送此数据。以下代码为我提供了 s3 的签名 url
axios.get(ENDPOINT_TO_GET_SIGNED_URL, params:'file-name': file.name,'file-type': file.type,"content-type": 'evidence')
.then(function (result)
// console.log(result);
returnUrl = result.data.url;
var signedUrl = result.data.signedRequest;
return uploadFile(file,signedUrl)
)
在我的 uploadFile 函数中,我通过以下代码上传图片
RNFetchBlob.fetch('PUT', signedUrl,
'Content-Type' : file.type,
RNFetchBlob.wrap(file.uri)
)
.then(resolve)
【讨论】:
以上是关于如何使用 react-native-camera 从相机胶卷 url 显示图像?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 react-native-camera 人脸检测器检测人脸?
使用 react-native-camera,如何访问保存的图片?
如何将捕获的图像与 react-native-camera 一起使用