web-dev-qa-db-ja.com

React-Native：画像のURLをbase64文字列に変換します

私は、オフライン表示機能のためにbase64文字列形式で画像を保存する必要があるリアクションネイティブアプリを構築しています。

画像をbase64文字列として保存するのに最適なライブラリ/関数は何ですか？私のURLが「 http://www.example.com/image.png 」であると仮定します。

また、文字列として保存する前に、httpリクエストを取得して取得する必要がありますか？私のロジックは「はい」と言っていますが、React Nativeでは、サーバーから最初に要求せずに<Image>コンポーネントに画像をロードできます。

リアクションネイティブでこれを行うための最良のオプションは何ですか？

javascriptimagebase64react-native
26
Avishay Bar

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

ソース プロジェクトWiki

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

React nativeで画像をbase64に変換するには、FileReaderユーティリティが役立ちます。

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

これには react-native-file が必要です。

別の選択肢、おそらく好ましい選択肢は、NativeModuleを使用することです。 中記事 はその方法を示しています。 ネイティブモジュール を作成する必要があります。

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

より良い方法があります：まだインストールしていない場合は、これをインストールしてください react-native-fs .

import RNFS from 'react-native-fs';

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

file:// uriのみを扱っている場合、スタンドアロンexpo FileSystemパッケージを使用すると、次のことが簡単になります。

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

ただし、content:// uriも処理する必要がある場合（たとえば、CameraRoll w = an Android device）を使用している場合は、別のものが必要です。良い代替案：

const base64 = await new Promise((resolve, reject) => ImageStore.getBase64ForTag(photo.uri, resolve, reject));
0
Ulad Kasach