React-Native: Konwertuj adres URL obrazu na ciąg base64

Question

Buduję aplikację natywną reagowania, która musi przechowywać obrazy w formacie ciągowym base64 do przeglądania w trybie offline.

Jaka biblioteka/funkcja dałaby mi najlepszy wynik, aby zapisać obraz jako ciąg podstawowy64? zakładając, że mój adres URL to "http://www.example.com/image.png".

Czy muszę też wprowadzić żądanie http, aby je zapisać przed zapisaniem jako ciąg? Moja logika mówi "tak", ale w trybie "natywnym" możesz załadować obrazy na komponent Obraz> < bez żądania ich najpierw z serwera.

Jaka byłaby najlepsza opcja, aby zareagować natywnie?

Answer 1

używam react-native-fetch-blob, w zasadzie to zapewnia wiele systemów plików oraz funkcji sieciowych dokonać przesyłania danych całkiem proste.

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

źródło Project Wiki

Answer 2

Aby przekonwertować obraz do base64 w React rodzimy, narzędzie FileReader jest pomocne:

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

Wymaga to react-native-file.

Inną alternatywą i prawdopodobnie preferowaną alternatywą jest użycie NativeModules. Medium article pokazuje, jak. Wymaga utworzenia native module.

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

Answer 3

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