React-Native: Convertissez l'url de l'image à la chaîne base64
je suis en train de construire une application native react qui a besoin de stocker des images au format Base64 string pour des capacités de visualisation hors ligne.
quelle bibliothèque / fonction me donnerait le meilleur résultat pour stocker l'image en tant que chaîne base64? en supposant que mon url est "http://www.example.com/image.png".
aussi, dois-je faire une requête http pour l'obtenir avant de le stocker sous forme de chaîne de caractères? ma logique dit oui, mais dans react native vous pouvez charger des images sur le composant sans demande d'abord à partir du serveur.
Quelle serait la meilleure option pour cela dans réagissent natif?
4 réponses
j'utilise réagissent-native-fetch-blob, essentiellement il fournit beaucoup de système de fichiers et les fonctions de réseau rendent le transfert de données assez facile.
import RNFetchBlob from "react-native-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 Projet Wiki
ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
ImageStore.getBase64ForTag(imageURI, (base64Data) => {
// base64Data contains the base64string of the image
}, (reason) => console.error(reason));
}, (reason) => console.error(reason));
pour convertir l'image en base64 dans React native, L'utilitaire FileReader est utile:
const fileReader = new FileReader();
fileReader.onload = fileLoadedEvent => {
const base64Image = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(imagepath);
il faut réagissent-native-fichier.
une autre alternative, et probablement la meilleure alternative, est d'utiliser des NativeModules. Moyen de l'article montre comment. Il nécessite la création d'un module natif.
NativeModules.ReadImageData.readImage(path, (base64Image) => {
// Do something here.
});
Il ya une meilleure façon: L'installation de cette réagissent-native-fs, SI vous ne l'avez pas déjà.
import RNFS from 'react-native-fs';
RNFS.readFile(this.state.imagePath, 'base64')
.then(res =>{
console.log(res);
});