React-Native: преобразовать URL-адрес изображения в строку base64

Я создаю ответное родное приложение, которое должно хранить изображения в формате base64 для автономных функций просмотра.

Какая библиотека/функция даст мне лучший результат для хранения изображения в виде строки base64? предполагая, что мой url "http://www.example.com/image.png".

Кроме того, мне нужно сделать http-запрос, чтобы получить его, прежде чем хранить его в виде строки? моя логика говорит "да", но в ответе native вы можете загружать изображения в компонент "lt > Image" без запроса их сначала с сервера.

Каким будет лучший способ сделать это в ответном нативном?

Ответ 1

Я использую response-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 storage
  .then(resp => {
    // the image path you can use it directly with Image component
    imagePath = resp.path();
    return resp.readFile("base64");
  })
  .then(base64Data => {
    // here base64 encoded image
    console.log(base64Data);
    // remove the file from storage
    return fs.unlink(imagePath);
  });

источник Project Wiki

Ответ 2

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

Ответ 3

Чтобы преобразовать изображение в base64 в React native, полезна утилита FileReader:

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

Для этого требуется реакция-собственный файл.

Другой альтернативой, и, вероятно, предпочтительной альтернативой, является использование NativeModules. Средняя статья показывает, как. Требуется создать собственный модуль.

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

Ответ 4

Существует лучший способ: Установите этот response-native-fs, ЕСЛИ у вас его еще нет.

import RNFS from 'react-native-fs';

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

Ответ 5

Автономный экспо-пакет FileSystem делает это простым:

const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });

Начиная с 2019-09-27 этот пакет обрабатывает как file://, так и content:// URI.

Ответ 6

response-native-image-picker включает узел данных base64 в возвращаемый объект. FYI