webentwicklung-frage-antwort-db.com.de

Reagieren Sie das native base64-Bild im Album

Eine Drittanbieter-API gibt ein "QR-Code-Bild" in base64-Kodierung zurück.
Ich muss dieses Bild im Benutzeralbum speichern.

der Betreuer von React-Native-Fetch-Blob ist verschwunden, sodass niemand auf Github-Frage createFile von React-Native-Fetch-Blob-Dokument nicht wie erwartet reagiert (Bild wird nicht im Album gespeichert) )

  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));
  });

Hat sich schon jemand mit diesem Problem befasst?

So speichern Sie eine base64-Kodierung Image-String im User-Album? (als JPG- oder PNG-Datei)

weil ich fetch eine API ohne CORS-Header habe,
Ich kann es nicht in Debug JS Remotely debuggen
Chrome würde diese Anforderung verhindern, 

Ich muss das auf meinem Android Phone laufen lassen, damit es funktioniert
(keine CORS-Kontrolle am echten Telefon) 

Ich plane die Verwendung der Zwischenablage speichern base64 string,
und hardcode es in meinem Code,
, um zu debuggen, was mit react-native-fetch-blobcreateFile API nicht in Ordnung ist

javascriptandroidreact-native
3
NamNamNam

Ich löse das problem
Ich habe data:image/png;base64, am Anfang des Strings vergessen.
 enter image description here

Ich entferne es mit folgendem Code 

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

und speichern Sie dann die Bilddatei

  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));
  });

Ich habe einen Blog darüber geschrieben

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

2
NamNamNam

Entfernen Sie data:image/png;base64, in Ihrer base64-Zeichenfolge

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)});

Und dann habe ich mein Problem gelöst.

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