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?

17
demandé sur Mr Lister 2016-01-20 21:45:20

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

16
répondu Ven Jest 2018-06-19 09:46:29
 ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
      ImageStore.getBase64ForTag(imageURI, (base64Data) => {
          // base64Data contains the base64string of the image
      }, (reason) => console.error(reason));
 }, (reason) => console.error(reason));
9
répondu shrutim 2017-05-26 17:31:09

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.
});
4
répondu vijayst 2016-08-19 10:18:59

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);
});
0
répondu David Madi 2018-05-29 03:56:07