我正在构建一个本机应用程序,需要以base64字符串格式存储图像,以便离线查看功能。
什么库/函数会给我最好的结果来将图像存储为base64字符串?假设我的网址是“http://www.example.com/image.png”。
另外,在将其存储为字符串之前,是否需要发出http请求才能获取它?我的逻辑说是,但在本机中你可以在< Image>上加载图像。组件首先从服务器请求它们。
在本地做出反应的最佳选择是什么?
答案 0 :(得分:26)
我使用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);
});
答案 1 :(得分:14)
ImageEditor.cropImage(imageUrl, imageSize, (imageURI) => {
ImageStore.getBase64ForTag(imageURI, (base64Data) => {
// base64Data contains the base64string of the image
}, (reason) => console.error(reason));
}, (reason) => console.error(reason));
答案 2 :(得分:6)
要在React native中将图像转换为base64,FileReader实用程序很有帮助:
const fileReader = new FileReader();
fileReader.onload = fileLoadedEvent => {
const base64Image = fileLoadedEvent.target.result;
};
fileReader.readAsDataURL(imagepath);
另一种替代方案,也许是首选方案,是使用NativeModules。 Medium article显示了如何。它需要创建native module。
NativeModules.ReadImageData.readImage(path, (base64Image) => {
// Do something here.
});
答案 3 :(得分:3)
有一种更好的方法: 安装此react-native-fs,如果您还没有。
import RNFS from 'react-native-fs';
RNFS.readFile(this.state.imagePath, 'base64')
.then(res =>{
console.log(res);
});
答案 4 :(得分:2)
您可以使用react-native-image-base64。您必须提供图片网址,它会返回图片的base64字符串。
ImgToBase64.getBase64String('file://youfileurl')
.then(base64String => doSomethingWith(base64String))
.catch(err => doSomethingWith(err));
答案 5 :(得分:1)
独立的expo FileSystem软件包使此过程变得简单:
const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });
自2019年9月27日起,此软件包可处理file://
和content://
uri的
答案 6 :(得分:0)
react-native-image-picker在返回的对象中包含一个base64数据节点。菲
答案 7 :(得分:0)
我使用了另一个软件包:react-native-fs
import RNFS from 'react-native-fs';
var data = await RNFS.readFile( "file://path-to-file", 'base64').then(res => { return res });
这很好。
答案 8 :(得分:0)
对我而言,将设备上的本地文件中的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);
});
答案 9 :(得分:0)
如果您在托管工作流中使用 expo 并且无法使用 react-native-fs
,则可以使用 expo-file-system
库来完成。这是一个辅助函数,它只提供一个图像 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 Native Image 组件中的示例用法如下:
<Image
style={{ width: 48, height: 48 }}
source={{ uri: `data:image/png;base64,${image}` }}
/>