'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?
Solution 1:[1]
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
Solution 2:[2]
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);
});
Solution 3:[3]
ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
ImageStore.getBase64ForTag(imageURI, (base64Data) => {
// base64Data contains the base64string of the image
}, (reason) => console.error(reason));
}, (reason) => console.error(reason));
Solution 4:[4]
The standalone expo FileSystem package makes this simple:
const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });
- https://docs.expo.io/versions/latest/sdk/filesystem/
- https://github.com/expo/expo/tree/master/packages/expo-file-system
As 2019-09-27 this package handles both file://
and content://
uri's
Solution 5:[5]
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.
});
Solution 6:[6]
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));
Solution 7:[7]
react-native-image-picker includes a base64 data node in the returned object. fyi
Solution 8:[8]
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}` }}
/>
Solution 9:[9]
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.
Solution 10:[10]
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);
});
Solution 11:[11]
import { Platform, ActionSheetIOS } from 'react-native';
import DocumentPicker from 'react-native-document-picker';
import ImagePicker from 'react-native-image-crop-picker';
import RNFS from 'react-native-fs';
For document conversion:
pickDocument = async (resolve: (payload: any) => void, reject: (payload: any) => void) => {
try {
const result = await DocumentPicker.pick({
type: [DocumentPicker.types.images, DocumentPicker.types.pdf]
});
const fileType = result[0].type;
const fileExtension = fileType.substr(fileType.indexOf('/') + 1);
const realURI = Platform.select({ android: result[0].uri, ios: decodeURI(result[0].uri), })
const b64 = await RNFS.readFile(realURI, "base64")
const filename = result[0].name.replace(/\s/g, '')
resolve({ b64, fileType, fileExtension, filename });
} catch {
reject(new Error('Action cancelled!'));
}
}
For image conversion:
pickImage = (resolve: (payload: any) => void, reject: (payload: any) => void) => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true,
}).then(async response => {
const { path: b64Content, mime: fileType, filename:name } = response;
const b64 = await RNFS.readFile(b64Content, "base64")
const fileExtension = String(fileType).substr(String(fileType).indexOf('/') + 1);
const filename = name.replace(/\s/g, '')
resolve({ b64, fileType, fileExtension, filename });
}).catch(({message})=>{
console.log('ERROR',message)
reject(new Error('Action cancelled!'));
});
}
Solution 12:[12]
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
});
Solution 13:[13]
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);
};
});
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow