web-dev-qa-db-fra.com

Réagir natif enregistrer une image base64 en album

Les API tierces renvoient une "image de code QR" en base64,
J'ai besoin de sauvegarder cette image dans l'album de l'utilisateur.

le responsable de React-Native-Fetch-Blob ayant disparu, personne ne répondant à la question Github, createFile de Document React-Native-Fetch-Blob ne fonctionnant pas comme prévu (sauvegarde de l'image dans l'album)

  import fetch_blob from 'react-native-fetch-blob';

  // json.qr variable are return from API

  const fs = fetch_blob.fs
  const base64 = fetch_blob.base64
  const dirs = fetch_blob.fs.dirs

  const file_path = dirs.DCIMDir + "/some.jpg"
  const base64_img = base64.encode(json.qr)

  fs.createFile(file_path, base64_img, 'base64')
  .then((rep) => { 
    alert(JSON.stringify(rep));
  })
  .catch((error) => {
    alert(JSON.stringify(error));
  });

Quelqu'un a déjà réglé ce problème?

Comment enregistrer une chaîne d'image encodée en base64 dans un album utilisateur? (sous forme de fichier jpg ou png)

parce que je fetch une API sans en-tête CORS,
Je ne peux pas le déboguer dans Debug JS Remotely
Chrome arrêterait cette demande, 

Je dois l'exécuter sur mon téléphone Android pour que cela fonctionne
(pas de contrôle CORS sur le vrai téléphone) 

Je planifie utiliser Clipboard enregistrer la chaîne base64,
et le coder en dur dans mon code,
pour déboguer ce qui ne va pas avec l'API react-native-fetch-blobcreateFile

javascriptandroidreact-native
3
NamNamNam

Je résous le problème,
J'ai oublié data:image/png;base64, au début de la chaîne.
 enter image description here

Je l'enlève avec le code suivant 

  // json.qr is base64 string
  var image_data = json.qr.split('data:image/png;base64,');
  image_data = image_data[1];

puis enregistrez le fichier image

  import fetch_blob from 'react-native-fetch-blob';
  import RNFS from 'react-native-fs';

  const fs = fetch_blob.fs
  const dirs = fetch_blob.fs.dirs      
  const file_path = dirs.DCIMDir + "/bigjpg.png"

  // json.qr is base64 string "data:image/png;base64,..."

  var image_data = json.qr.split('data:image/png;base64,');
  image_data = image_data[1];

  RNFS.writeFile(file_path, image_data, 'base64')
  .catch((error) => {
    alert(JSON.stringify(error));
  });

J'ai écrit un blog à ce sujet

http://1c7.me/react-native-save-base64-image-to-album/

2
NamNamNam

Supprimer data:image/png;base64, dans votre chaîne base64

var Base64Code = base64Image.split("data:image/png;base64,"); //base64Image is my image base64 string

const dirs = RNFetchBlob.fs.dirs;

var path = dirs.DCIMDir + "/image.png";

RNFetchBlob.fs.writeFile(path, Base64Code[1], 'base64')
.then((res) => {console.log("File : ", res)});

Et puis j'ai résolu mon problème.

2
Akshay Italiya

const path = `${RNFS.PicturesDirectoryPath}/My Album`;
await RNFS.mkdir(path);
return await fetch(uri)
   .then(res => res.blob())
   .then(image => {
      RNFetchBlob.fs.readFile(uri, "base64").then(data => {
         RNFS.appendFile(`${path}/${image.data.name}`, data, "base64").catch(
            err => {
               console.log("error writing to Android storage :", err);
            }
         );
      });
   });

0
Sundari Ragavan