关于javascript：React-Native：将图片网址转换为base64字符串

React-Native: Convert image url to base64 string

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

哪个库/函数可以给我最好的结果，以将图像存储为base64字符串？假设我的网址是" http：//www.example.com/image.png "。

此外，在将其存储为字符串之前，是否需要发出http请求以获取它？我的逻辑说是，但是在本机反应中，您可以在组件上加载图像，而无需先从服务器请求它们。

在本机反应中做到这一点的最佳选择是什么？

我使用rn-fetch-blob，基本上它提供了许多文件系统，并且网络功能使数据传输变得非常容易。

react-native-fetch-blob is deprecated

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import RNFetchBlob from"rn-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

相关讨论

1
2
3
4
5

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

相关讨论

有一个更好的方法：
如果尚未安装此react-native-fs，请安装它。

1
2
3
4
5
6

import RNFS from 'react-native-fs';

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

相关讨论

要在React native中将图像转换为base64，FileReader实用程序会很有帮助：

1
2
3
4
5

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

这需要react-native-file。

另一个替代方法，可能是首选的替代方法，是使用NativeModules。中篇文章显示了如何。它需要创建一个本机模块。

1
2
3

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

独立的expo FileSystem软件包可简化此过程：

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

https://docs.expo.io/versions/latest/sdk/filesystem/
https://github.com/expo/expo/tree/master/packages/expo-file-system

自2019年9月27日起，此程序包可处理file://和content:// uri的

相关讨论

您可以使用react-native-image-base64。您必须提供图像URL，它返回图像的base64字符串。

1
2
3

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

相关讨论

react-native-image-picker在返回的对象中包含一个base64数据节点。菲

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13

我使用了另一个软件包：react-native-fs

1
2
3

import RNFS from 'react-native-fs';

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

这很好用。