CODEWITHSUNDEEP
base64react-native
Wern Ancheta
Wern Ancheta

Reputation: 23297

How to get base64 of image in React Native

I'm using react native image picker and image resizer to pick and then resize an image. How do I get the base64 of the image once it has been resized?

ImagePickerManager.showImagePicker(imagepicker_options, (response) => {
  ImageResizer.createResizedImage(response.uri, 550, null, 'JPEG', 100).then((resizedImageUri) => {
    //get base64 of image
  });
});

Upvotes: 5

Views: 10200

Answers (2)

Filipe Gomes
Filipe Gomes

Reputation: 328

Actually the imagepicker_options provides a way to resize. You can pass maxWidth and maxHeight on options.

The code:

const imagepicker_options = {
  mediaType: 'photo',
  maxWidth: 550,
  storageOptions: {
    skipBackup: true,
    cameraRoll: false,
    path: 'images',
  },
}
ImagePickerManager.showImagePicker(imagepicker_options, (response) => {
  //get base64 of image
  const base64 = response.data
});

Upvotes: 0

Aaron Saunders
Aaron Saunders

Reputation: 33345

https://libraries.io/npm/react-native-asset-library-to-base64

ImagePickerManager.showImagePicker(imagepicker_options, (response) => {
  ImageResizer.createResizedImage(response.uri, 550, null, 'JPEG', 100).then((resizedImageUri) => {
      //get base64 of image, uri is link to asset-library://
      ReadImageData.readImage(uri, (imageBase64) => {
    console.log(imageBase64);
    });
  });
});

you might also want to read this if you haven't https://github.com/facebook/react-native/issues/1158

Upvotes: 4

Related Questions