【问题标题】:How to save a Picture to a specific folder from React Native Camera Roll如何将图片从 React Native 相机胶卷保存到特定文件夹
【发布时间】:2018-01-08 13:23:36
【问题描述】:

所以我使用 Expo 的 Camera API 来拍照,如下所示:

takePicture = async function() {
  if(this.camera) {
    this.camera.takePictureAsync().then(data => {
        CameraRoll.saveToCameraRoll(data.uri);
    }).then(() => {
      this.setState({
        photoId: this.state.photoId + 1,
      });
    });
  }
};

现在,我想专门检索我使用此应用拍摄的照片以供以后使用。我认为一个简单的方法是,如果应用程序将其图片保存到相机胶卷中的一个单独文件夹中,就像 Instagram 在其中制作自己的文件夹一样。

如何让应用在相机胶卷中创建自己的文件夹,然后将图片保存到其中?

【问题讨论】:

    标签: android ios react-native expo camera-roll


    【解决方案1】:

    在 Android 上,您可以使用 react-native-fetch-blob 及其文件系统访问 API(PictureDir 常量)。

    例如,我这样做:

    try {
        const data = await this.camera.takePictureAsync()
        await RNFetchBlob.fs.mkdir(`${RNFetchBlob.fs.dirs.PictureDir}/myfolder`)
        await RNFetchBlob.fs.mv(
            data.api, 
            `${RNFetchBlob.fs.dirs.PictureDir}/myfolder/${moment().unix()}.jpg`
        )
    } catch () {
        ...
    }
    

    https://github.com/wkh237/react-native-fetch-blob/wiki/File-System-Access-API

    【讨论】:

    • 我也在使用 RNFetchBlob,但是 takePictureAsync 方法不返回 data.api。我想将从 Camera 拍摄的图像存储在 Picture Dir 内的所需文件夹中。
    • @ZainNazirButt,请在新堆栈问题中描述您的问题,我(和社区)会尽力帮助您。
    • @JulienMalige 非常感谢。您使用 react-native-fetch-blob 和文件系统访问 API 的建议对我有所帮助。
    【解决方案2】:

    你也可以在这里看到答案。因为这里问了同样的问题 https://stackoverflow.com/a/67533729/10361123

    我知道我回答这个问题为时已晚。

    你可以简单地使用下面的 npm 包来获得你想要的输出

    npm i @react-native-community/cameraroll

    之后,您必须在 try catch 块中使用以下代码,以便您可以轻松地将图像存储在所需的路径上。

       try{
            CameraRoll.save(data.uri,{type:"photo",album:"../your folder name"}).
                        then((res)=>{console.log("save img...",res);}).
                        catch((err)=>{console.log("err for save img...",err);})
        }
        catch{
          //your code...
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-05-01
      • 2016-06-11
      • 1970-01-01
      • 2013-07-22
      • 2022-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多