web-dev-qa-db-fra.com

React-Native: convertir l'url de l'image en chaîne base64

Je crée une application native React qui doit stocker des images au format de chaîne base64 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 ".

De plus, dois-je faire une requête http pour l'obtenir avant de le stocker sous forme de chaîne? ma logique dit oui, mais en réaction native, vous pouvez charger des images sur le composant <Image> sans les demander d'abord au serveur.

Quelle serait la meilleure option pour le faire en natif réactif?

javascriptimagebase64react-native
26
Avishay Bar

J'utilise react-native-fetch-blob , en gros, il fournit beaucoup de fonctions de système de fichiers et de réseau qui facilitent le transfert de données.

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 Project Wiki

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

Pour convertir l'image en base64 en React native, l'utilitaire FileReader est utile:

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

Cela nécessite react-native-file .

Une autre alternative, et probablement l'alternative préférée, consiste à utiliser NativeModules. Le article moyen montre comment. Cela nécessite de créer un module natif .

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

Il y a une meilleure façon: installez ceci react-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);
});
4
David Madi

Si vous avez affaire à file:// uri seulement, le package expo FileSystem autonome rend cela simple:

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

Mais si vous devez faire face à content:// uri également (par exemple, si vous utilisez CameraRoll avec un Android), vous aurez besoin d'autre chose. Ce qui suit est une bonne alternative:

const base64 = await new Promise((resolve, reject) => ImageStore.getBase64ForTag(photo.uri, resolve, reject));
0
Ulad Kasach