React-Native: Chuyển đổi url hình ảnh thành chuỗi base64

Question

Tôi đang tạo ứng dụng gốc phản ứng cần lưu trữ hình ảnh ở định dạng chuỗi base64 để xem khả năng xem ngoại tuyến.

Thư viện/chức năng nào sẽ cho tôi kết quả tốt nhất để lưu trữ hình ảnh dưới dạng chuỗi base64? giả sử url của tôi là "http://www.example.com/image.png".

Ngoài ra, tôi có cần yêu cầu http nhận trước khi lưu trữ dưới dạng chuỗi không? logic của tôi nói có, nhưng trong phản ứng bản địa, bạn có thể tải hình ảnh trên thành phần < Hình ảnh> mà không yêu cầu chúng đầu tiên từ máy chủ.

Điều gì sẽ là lựa chọn tốt nhất để thực hiện điều này trong phản ứng gốc?

Answer 1

Tôi sử dụng react-native-fetch-blob, về cơ bản nó cung cấp nhiều chức năng hệ thống và mạng giúp truyền dữ liệu dễ dàng.

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

nguồn Project Wiki

Answer 2

Để chuyển đổi hình ảnh sang base64 trong Phản ứng tự nhiên, tiện ích FileReader là hữu ích:

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

Điều này đòi hỏi react-native-file.

Một giải pháp thay thế khác, và có lẽ là giải pháp thay thế ưu tiên, là sử dụng NativeModules. Medium article cho biết cách thực hiện. Nó đòi hỏi phải tạo ra một 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));