如何使用react-native-camera从相机胶卷显示图像?

时间:2017-01-31 06:12:43

标签: react-native react-native-camera

我使用react-native-camera捕获图像并将它们保存在适用于iOS设备的cameraRoll(CaptureTarget)中,捕获时我会以下列形式获取图像路径

"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"

如何使用此路径在Image组件中显示图像(来自react-native)?

以前我使用磁盘作为CaptureTarget选项,我能够显示图像url图像组件,但现在要求是在相机胶卷中保存图像?

1 个答案:

答案 0 :(得分:2)

我使用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的签名网址

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)