1

I have a problem with Image size, taken from camera, I want to send some photos to the backend in base64 format, but when I pick an image from my storage ( galery ), it is sent perfectly to the backend, but when I take an image from the camera, it is too large to be uploaded, whe I try to send the base64 in a axios request, the request is just pending and then cancelled for reaching the time limit.

Is there a way to send the base64, but reduced in size, or something ?

This is my saga call to get the image :

import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

export default function* takePhotosFromCamera() {
  try {
    const { status: cameraRollPermission } = yield call(Permissions.askAsync, Permissions.CAMERA_ROLL);
    const { status: cameraPermission } = yield call(Permissions.askAsync, Permissions.CAMERA);
    const permissionsAccepted =
      cameraRollPermission === PERMISSIONS.GRANTED && cameraPermission === PERMISSIONS.GRANTED;

    if (!permissionsAccepted) {
      yield put(permissionAccepted('No'));
      yield cancel();
    }

    const photo = yield call(ImagePicker.launchCameraAsync, {
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      quality: 1,
      base64: true,
    });

    if (photo.cancelled) {
      yield cancel();
    }

    console.log(photo);

    yield put(setPhotosSuccess(result));
  } catch (e) {
    yield null;
  }
}

The console.log shows the correct result, an image with uri, base64, etc ..

I am using expo for my react-native app.

Any help would be much appreciated.

TaouBen
  • 1,165
  • 1
  • 15
  • 41

1 Answers1

2

Changing the quality option between 0 and 1 will change the size of the photo, and quality of course.

const photo = yield call(ImagePicker.launchCameraAsync, {
  mediaTypes: ImagePicker.MediaTypeOptions.All,
  quality: 0.5, <-- Between 0 and 1
  base64: true,
});

If you want to transfer your photos in base64 format, you probably don't have any other options since base64 does not suit most compression algorithms. See this.

I've used ImagePicker and its compression is not very well. If you don't have to stick with base64, you could try to use another javascript compression on the output image, and send it to your backend as form data.

Mertcan Seğmen
  • 903
  • 2
  • 11
  • 26