प्रतिक्रिया-मूल: छवि यूआरएल को बेस 64 स्ट्रिंग

Question

में कनवर्ट करें मैं एक प्रतिक्रियाशील मूल ऐप बना रहा हूं जिसे ऑफलाइन देखने की क्षमताओं के लिए बेस 64 स्ट्रिंग प्रारूप में छवियों को स्टोर करने की आवश्यकता है।

क्या लाइब्रेरी/फ़ंक्शन मुझे बेस 64 स्ट्रिंग के रूप में छवि को स्टोर करने का सबसे अच्छा परिणाम देगा? मेरा यूआरएल मानना ​​है "http://www.example.com/image.png"।

साथ ही, क्या मुझे स्ट्रिंग के रूप में इसे संग्रहीत करने से पहले इसे प्राप्त करने के लिए http अनुरोध करने की आवश्यकता है? मेरा तर्क हां कहता है, लेकिन प्रतिक्रियात्मक मूल में आप < छवि> घटक पर छवियों को बिना सर्वर के अनुरोध के पहले लोड कर सकते हैं।

प्रतिक्रिया मूल में ऐसा करने का सबसे अच्छा विकल्प क्या होगा?

Answer 1

मैं react-native-fetch-blob उपयोग करते हैं, मूल रूप से यह फाइल सिस्टम और नेटवर्क कार्यों का बहुत कुछ डेटा स्थानांतरित बहुत आसान बनाने के प्रदान करता है।

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

स्रोत Project Wiki

Answer 2

बेस 64 के लिए छवि परिवर्तित करने के लिए देशी प्रतिक्रिया में, FileReader उपयोगिता उपयोगी है:

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

यह react-native-file की आवश्यकता है।

एक और विकल्प, और शायद पसंदीदा विकल्प, मूल मॉड्यूल का उपयोग करना है। Medium article दिखाता है कि कैसे। इसे 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));