CODEWITHSUNDEEP
javascriptimagebase64react-native
Avishay Bar
Avishay Bar

Reputation: 833

React-Native: Convert image url to base64 string

I'm building a react native app that needs to store images at base64 string format for offline viewing capabilities.

What library / function would give me the best result to store the image as base64 string? assuming my url is "http://www.example.com/image.png".

Also, do I need to make http request to get it before storing it as a string? my logic says yes, but in react native you can load images on the <Image> component without request them first from the server.

What would be the best option to do this in react native?

Upvotes: 55

Views: 172879

Answers (16)

AbdulmateenChitrali
AbdulmateenChitrali

Reputation: 399

Try this code

import * as FileSystem from "expo-file-system";

// others state
const [base64Image, setBase64Image] = useState(null);
// others code
useEffect(() => {
        async function getBase64() {
          const base64 = await FileSystem.readAsStringAsync(imageUrl, { encoding: 'base64' });      
          const base64Data = "data:image/png;base64,"+base64;
          setBase64Image(base64Data);
        }
        getBase64()
    }, [imageUrl]);

Upvotes: 1

Sourabh Gera
Sourabh Gera

Reputation: 1006

import ImgToBase64 from 'react-native-image-base64';
 
ImgToBase64.getBase64String(trainingRooms)
            .then(base64String => {
                console.log("Sourabh____ ImgToBase64 base64String "+base64String );
            })
            .catch(err => {
                console.log("Sourabh____ ImgToBase64 error "+err);
            })

Upvotes: 0

Akram Syed
Akram Syed

Reputation: 21

i am using react-native-image-crop-picker add includeBase64 prop it will response in base64 converted image

ImagePicker.openPicker({
  width: 300,
  height: 400,
  includeBase64:true
}).then(image => {
  console.log(image.data);
});

Upvotes: 2

Firoj
Firoj

Reputation: 1

Convert url image to base64

const getBase64ImageFromUrl = url => fetch(url) .then(response => response.blob()) .then( blob => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; blob = new Blob([blob], {type: 'image/png'}); reader.readAsDataURL(blob); }), );

await getBase64ImageFromUrl("https://your image url");

Upvotes: -1

Dragos UniqQum
Dragos UniqQum

Reputation: 695

No library need, use built in JS features

export default async function base64File(url) {
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      const base64data = reader.result;
      resolve(base64data);
    };
  });
}

Upvotes: 8

Naveen Tiwari
Naveen Tiwari

Reputation: 361

If You are using **react-native-image-picker**
Then it includes base64 string in response object

    if you are  using any  other library i.e. **react-native-document-picker**
    then you have to use **react-native-fs** library 
    
    import RNFS from 'react-native-fs';
    
      RNFS.readFile(item.uri, 'base64').then((res) => {
                  //Here in enter code here res you  will get base64 string 
                });

Upvotes: 1

Henrique Aron
Henrique Aron

Reputation: 1307

In case you're using expo in a managed workflow and cannot use react-native-fs, you can do it using the expo-file-system library. Here's a helper function that will do the trick by only providing an image URL and will return a base64 encoded image. PS: It doesn't contain the base64 prefix, you need to include it yourself based on the image type you have.


import * as FileSystem from 'expo-file-system';


async function getImageToBase64(imageURL) {
  let image;

  try {
    const { uri } = await FileSystem.downloadAsync(
      imageURL,
      FileSystem.documentDirectory + 'bufferimg.png'
    );

    image = await FileSystem.readAsStringAsync(uri, {
      encoding: 'base64',
    });
  } catch (err) {
    console.log(err);
  }

  return image;
}

An example usage in a React Native Image component is as follows:

<Image
  style={{ width: 48, height: 48 }}
  source={{ uri: `data:image/png;base64,${image}` }}
/>

Upvotes: 5

Ven Jest
Ven Jest

Reputation: 690

I use rn-fetch-blob, basically it provides lot of file system and network functions make transferring data pretty easy.

react-native-fetch-blob is deprecated

import RNFetchBlob from "rn-fetch-blob";
const fs = RNFetchBlob.fs;
let imagePath = null;
RNFetchBlob.config({
  fileCache: true
})
  .fetch("GET", "http://www.example.com/image.png")
  // the image is now dowloaded to device's storage
  .then(resp => {
    // the image path you can use it directly with Image component
    imagePath = resp.path();
    return resp.readFile("base64");
  })
  .then(base64Data => {
    // here's base64 encoded image
    console.log(base64Data);
    // remove the file from storage
    return fs.unlink(imagePath);
  });

source Project Wiki

Upvotes: 57

Shehzad Osama
Shehzad Osama

Reputation: 1302

You can use react-native-image-base64. You have to give image url and it returns the base64 string of image.

ImgToBase64.getBase64String('file://youfileurl')
  .then(base64String => doSomethingWith(base64String))
  .catch(err => doSomethingWith(err));

Upvotes: 6

TranVanThaiSon
TranVanThaiSon

Reputation: 49

For me upalod file mp4 from local file on devies to Facebook or another social:

var data = await RNFS.readFile( `file://${this.data.path}`, 'base64').then(res => { return res });
        const shareOptions = {
            title: 'iVideo',
            message: 'Share video',
            url:'data:video/mp4;base64,'+ data,
            social: Share.Social.FACEBOOK,
            filename: this.data.name , // only for base64 file in Android 
        };     
        Share.open(shareOptions).then(res=>{
           Alert.alert('Share Success`enter code here`!')
        }).catch(err=>{
            console.log('err share', err);
        });

Upvotes: 0

Gilshaan Jabbar
Gilshaan Jabbar

Reputation: 11

I used another package: react-native-fs

import RNFS from 'react-native-fs';

var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });

This works fine.

Upvotes: 0

Ulad Kasach
Ulad Kasach

Reputation: 12908

The standalone expo FileSystem package makes this simple:

const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });

As 2019-09-27 this package handles both file:// and content:// uri's

Upvotes: 16

zematdev
zematdev

Reputation: 173

react-native-image-picker includes a base64 data node in the returned object. fyi

Upvotes: 5

David Madi
David Madi

Reputation: 585

There is a better way: Install this react-native-fs, IF you don't already have it.

import RNFS from 'react-native-fs';

RNFS.readFile(this.state.imagePath, 'base64')
.then(res =>{
  console.log(res);
});

Upvotes: 26

shrutim
shrutim

Reputation: 1078

 ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
      ImageStore.getBase64ForTag(imageURI, (base64Data) => {
          // base64Data contains the base64string of the image
      }, (reason) => console.error(reason));
 }, (reason) => console.error(reason));

Upvotes: 13

vijayst
vijayst

Reputation: 21894

To convert image to base64 in React native, the FileReader utility is helpful:

const fileReader = new FileReader();
fileReader.onload = fileLoadedEvent => {
  const base64Image = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(imagepath);

This requires react-native-file.

Another alternative, and probably the preferred alternative, is to use NativeModules. The Medium article shows how. It requires creating a native module.

NativeModules.ReadImageData.readImage(path, (base64Image) => {
  // Do something here.
});

Upvotes: 9

Related Questions