Where does Camera.takePictureAsync() save photos?

#1

where Camera.tackePicture function saves the photos?, I have searched my device but I could not found them. I have used console.log to print the path but I could not found it either.
I’m facing troubles while interacting with the filesystem is there any tutorial or examples?

best regards

#2

Camera.takePictureAsync saves the photo to the cache directory provided by iOS/Android. This means the photo may disappear if the OS clears the cache. From the Camera docs:

Returns a Promise that resolves to an object: { uri, width, height, exif, base64 } where uri is a URI to the local image file…

You then may want to move the image at that URI to another location:

The local image URI is temporary. Use Expo.FileSystem.copyAsync to make a permanent copy of the image.

1 Like
#3

sorry for bothering again, but I have used moveAsync and I’m getting:

[Unhandled promise rejection: Error: Location ‘file:///data/user/0/host.exp.exponent/cache/ReactNative_cropped_image_-1777227973.jpg’ isn’t movable.]

this is my code:

takePicture = async function() {
    if (this.camera) {
      this.camera.takePictureAsync().then(async (data) => {

        cropdata = {
          offset:{x:0, y:0},
          size:{width:100, height:100},
        };

        await ImageEditor.cropImage(
          data.uri, 
          cropdata,
          async (uri) => {
            FileSystem.moveAsync({
              from: uri,
              to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
            }).then(() => {
              this.setState({
                photoId: this.state.photoId + 1,
              });
              Vibration.vibrate();
            });
          },
          (error) => {
            console.log(error);
          }
        );

      });
    }
  };

Also I have tried to use Expo.FileSystem.copyAsync but I get the following error:

[Unhandled promise rejection: Error: Location ‘file:///data/user/0/host.exp.exponent/cache/ReactNative_cropped_image_1526945600.jpg’ isn’t readable.]

#4

Are you sure ${FileSystem.documentDirectory}photos directory exists? I think something similar happened to me once. If this is the reason we should definitely provide a more detailed message

#5

Yes I’m sure I have displayed images from the photos directory without cropping and I check the directory at each run using :

  componentDidMount() {
    FileSystem.makeDirectoryAsync(FileSystem.documentDirectory + 'photos').catch(e => {
      console.log(e, 'Directory exists');
    });
  }
#6

Okay, so ImageEditor is not in your app’s scope because it is generated by the Editor and not Expo. I’m afraid this cannot be modified with use of FileSystem ( @nikki ? ). Have you considered using ImageManipulator to crop your image?

1 Like
#7

I will try the ImageManipulator, but I’m sorry to waste your time again, what do you mean by “generated by the editor not expo”?. Best regards

#8

Expo’s FileSystem module can copy/move/etc. files that are previously saved in the app’s scope (for example via ImagePicker or using Asset.loadAsync). ImagerEditor is a core React Native functionality and it saves your image to a file that is outside Expo’s scope, thus FileSystem cannot perform actions on this file. Is this a bit clearer now? :slight_smile:

1 Like
#9

Much clearer. I think expo and react-native should be complementing each other, and expo should extends react-native functionalities (add-hoc) not overriding them, I may be wrong anyway thanks for your response great team!.

closed #10

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.