React Native 如何保存从图像选择器包中选取的图像

时间:2021-02-21 16:40:38

标签: react-native react-native-image-picker

大家好,我正在尝试制作像专辑这样的应用。

只有 2 个选项,打开相机,从库中选择。我可以从库中捕捉和挑选(我会在代码中展示)。

所以问题是我想将捕获或选择的图像保存在创建的自定义文件夹中,例如 ('./myAlbumPhotos')。我怎样才能做到。这显示的图像只是缓存图像

已安装的库

https://www.npmjs.com/package/react-native-image-crop-picker

https://www.npmjs.com/package/react-native-image-picker

AndroidManifest

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera2" android:required="true"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18" />

App.js

import React, { Component } from 'react'
import { Text, View,TouchableOpacity } from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';

export default class App extends Component {
  
  render() {
    const takePhotoFromCamera = () => {
      ImagePicker.openCamera({
        compressImageMaxWidth: 300,
        compressImageMaxHeight: 300,
        cropping: true,
        compressImageQuality: 0.7,
        saveToPhotos :true
      }).then(image => {
        console.log(image);
        setImage(image.path);
        this.bs.current.snapTo(1);
      });
    }
  
    const choosePhotoFromLibrary = () => {
      ImagePicker.openPicker({
        width: 300,
        height: 300,
        cropping: true,
        compressImageQuality: 0.7
      }).then(image => {
        console.log(image);
        setImage(image.path);
        this.bs.current.snapTo(1);
      });
    }
    return (
      <View >
 
      <TouchableOpacity  onPress={takePhotoFromCamera}>
        <Text >Take Photo</Text>
      </TouchableOpacity>
      <TouchableOpacity  onPress={choosePhotoFromLibrary}>
        <Text >Choose From Library</Text>
      </TouchableOpacity>
      <TouchableOpacity
        
        onPress={() => this.bs.current.snapTo(1)}>
        <Text >Cancel</Text>
      </TouchableOpacity>
    </View>
    )
  }
}

它像这样记录 enter image description here

我检查过它真的可以保存照片。问题是我怎样才能给出保存路径。带文件系统? .谢谢

1 个答案:

答案 0 :(得分:0)

我对你提到的同一个库也有同样的要求。然后我做的事情有点像黑客,但这对我来说已经足够了。所以,这只是一个建议!

  1. 像这样制作你的 takePhotoFromCamera。

ImagePicker.openCamera({
    // It converts iOS live photo into jpg
    forceJpg: true,
    // I mean don't remove your old configs. Add this prop as well there
})

  1. 之后,在那个 openCamera 方法的“then”回调范围内,做必要的事情来保存你的图像React Native save base64 image to Album