Javascript 反应本机：将图像url转换为base64字符串

我正在构建一个react本机应用程序，它需要以base64字符串格式存储图像，以实现脱机查看功能

哪一个库/函数可以给我最好的结果，将图像存储为base64字符串？假设我的url为“”

另外，在将其存储为字符串之前，是否需要发出http请求以获取它？我的逻辑是肯定的，但在react native中，您可以在组件上加载图像，而无需首先从服务器请求它们

---

在react native中执行此操作的最佳选项是什么？

要在react native中将图像转换为base64，FileReader实用程序非常有用：

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

这就需要

另一种选择，也可能是首选的选择，是使用NativeModule。这说明了如何。它需要创建一个

我使用，基本上它提供了很多文件系统和网络功能，使传输数据变得非常容易

不赞成

来源

有一个更好的方法： 如果您还没有安装，请安装它

import RNFS from 'react-native-fs';

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

---

独立的expo文件系统包简化了这一点：

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

---

2019年9月27日，此软件包处理

文件：//

和

内容：//

uri的

react本机图像选择器在返回的对象中包含base64数据节点。仅供参考

我使用了另一个软件包：

react native fs

import RNFS from 'react-native-fs';

var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });

---

这很好。

对于我来说，将文件mp4从设备上的本地文件上传到Facebook或其他社交网站：

var data = await RNFS.readFile( `file://${this.data.path}`, 'base64').then(res => { return res });
        const shareOptions = {
            title: 'iVideo',
            message: 'Share video',
            url:'data:video/mp4;base64,'+ data,
            social: Share.Social.FACEBOOK,
            filename: this.data.name , // only for base64 file in Android 
        };     
        Share.open(shareOptions).then(res=>{
           Alert.alert('Share Success`enter code here`!')
        }).catch(err=>{
            console.log('err share', err);
        });

你可以用。您必须给出图像url，它返回图像的base64字符串

ImgToBase64.getBase64String('file://youfileurl')
  .then(base64String => doSomethingWith(base64String))
  .catch(err => doSomethingWith(err));

---

如果您在托管工作流中使用expo，并且无法使用

react native fs

，则可以使用

expo文件系统

库执行此操作。这里有一个助手函数，它只提供一个图像URL，并返回一个base64编码的图像。 PS：它不包含base64前缀，您需要根据您拥有的图像类型自己包含它

import * as FileSystem from 'expo-file-system';


async function getImageToBase64(imageURL) {
  let image;

  try {
    const { uri } = await FileSystem.downloadAsync(
      imageURL,
      FileSystem.documentDirectory + 'bufferimg.png'
    );

    image = await FileSystem.readAsStringAsync(uri, {
      encoding: 'base64',
    });
  } catch (err) {
    console.log(err);
  }

  return image;
}

React本机映像组件中的示例用法如下：

<Image
  style={{ width: 48, height: 48 }}
  source={{ uri: `data:image/png;base64,${image}` }}
/>

如何使用像“user/Project/example.png”这样的本地图像？@Sathya Documentation在@OliverDixon这里提供了这样的本地文件示例，因此它不好，因为它不适合您？实际上，此代码将使应用程序崩溃，导致FileUriExposedExceptionCoCoCoPoads无法找到pod“React/Core”的兼容版本：在Podfile中：react native fetch blob（来自

。/node\u modules/react native fetch blob

）已解析为0.10.6，这取决于react native警告开发人员不要再使用ImageEditor：警告：ImageStore已弃用，将在未来版本中删除。要从本地映像获取base64编码字符串，请使用以下任一第三方库：*expo文件系统：

readAsStringAsync（文件路径，'base64'）

*react native fs:

readFile（文件路径，'base64'）

非常感谢。我只是知道我已经用过的图书馆@zematdev[！]CocoaPods无法找到pod“React/Core”的兼容版本：在Podfile中：React-native fetch blob（来自

。/node\u模块/React-native fetch blob

）已解析为0.10.6，这取决于React/Core，您的规范源中没有一个包含满足依赖关系的规范：

React/Core

。您有：*过期的源repo，您可以使用

pod repo update

或

pod install--repo update

进行更新键入的名称或版本错误。*未将承载Podspec的源repo添加到您的Podfile中。适用于RN

0.63.3

以上代码仅适用于图像，不适用于pdf和其他文件。

ImgToBase64.getBase64String('file://youfileurl')
  .then(base64String => doSomethingWith(base64String))
  .catch(err => doSomethingWith(err));

import * as FileSystem from 'expo-file-system';


async function getImageToBase64(imageURL) {
  let image;

  try {
    const { uri } = await FileSystem.downloadAsync(
      imageURL,
      FileSystem.documentDirectory + 'bufferimg.png'
    );

    image = await FileSystem.readAsStringAsync(uri, {
      encoding: 'base64',
    });
  } catch (err) {
    console.log(err);
  }

  return image;
}

<Image
  style={{ width: 48, height: 48 }}
  source={{ uri: `data:image/png;base64,${image}` }}
/>