javascript - jpg - React-Native: convierte la url de la imagen en una cadena base64

imagen en base64

Question

Estoy creando una aplicación nativa de reacción que necesita almacenar imágenes en formato de cadena base64 para capacidades de visualización sin conexión.

¿Qué biblioteca / función me daría el mejor resultado para almacenar la imagen como una cadena base64? asumiendo que mi url es " http://www.example.com/image.png ".

Además, ¿necesito hacer una solicitud http para obtenerla antes de almacenarla como una cadena? Mi lógica dice que sí, pero en Reactive Native puede cargar imágenes en el componente <Image> sin solicitarlas primero al servidor.

¿Cuál sería la mejor opción para hacer esto en reaccionar de forma nativa?

Answer 1

Hay una mejor manera: instale este react-native-fs , si aún no lo tiene.

import RNFS from ''react-native-fs'';

RNFS.readFile(this.state.imagePath, ''base64'')
.then(res =>{
  console.log(res);
});

Answer 2

Para convertir la imagen a base64 en React nativo, la utilidad FileReader es útil:

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

Esto requiere react-native-file .

Otra alternativa, y probablemente la alternativa preferida, es usar NativeModules. El artículo mediano muestra cómo. Requiere crear un módulo nativo .

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

Answer 3

Utilizo react-native-fetch-blob , básicamente proporciona muchos sistemas de archivos y las funciones de red facilitan la transferencia de datos.

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

Fuente Proyecto Wiki

Answer 4

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