[英]How do I save an image from expo-image-picker to expo-file-system and then render it?
我正在尝试将选定的图像存储在应用程序中,而不是存储在图像卷中。
这是我尝试过的:
await FileSystem.downloadAsync(
imageUri, // the image uri from expo-image-picker
FileSystem.documentDirectory + `${uuid}-image.jpg`
)
.then(({ uri }) => {
console.log("Finished downloading to ", uri);
})
.catch((error) => {
console.error(error);
});
我收到错误:
Unable to download file: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL"
我也试过:
await FileSystem.writeAsStringAsync(
FileSystem.documentDirectory + `spotPhotos/${uuid}-image.jpg`,
image.base64
);
当我尝试在 ImageBackground 组件中使用图像时,这似乎成功地保存了图像,但是我没有成功。
<ImageBackground
source={'data:image/png;base64'+imageFile}
style={{ borderRadius: 5, borderColor: 'black', width: 100, flex: 1, resizeMode: "cover", justifyContent: "center" }}
>
...
</ImageBackground>
错误提示无法读取该文件夹:
getFile -> err [Error: File '/var/mobile/Containers/Data/Application/.../spotPhotos' could not be read.]
我可以使用 uri 保存图像文件本身吗? 我是否需要将其转换为 base64 并返回?
看来我已经能够成功保存使用以下编码的图像 base64 :
await FileSystem.writeAsStringAsync(
FileSystem.documentDirectory + `spotPhotos/${uuid}-imagelocation.jpg`,
image.base64
);
并通过以下方式访问编码图像:
let imageFile = async () => {
let uri = FileSystem.documentDirectory + "spotPhotos/" + spot.imageloc;
let options = { encoding: FileSystem.EncodingType.Base64 };
let base64 = await FileSystem.readAsStringAsync(uri, options);
return (base64);
}
当我 console.log imageFile 我得到一个巨大的字符墙,然后崩溃 Vscodium,即使我尝试使用 string.prototype.slice() 记录前几个字符,所以我无法检查它,但我认为这是 base64 编码文件。
当我尝试将返回的值引用为 Image 或 ImageBackground 组件的源时,如下所示:
<Image style={{width: 50, height: 50}} source={{imageFile}}/>
// or
<Image style={{width: 50, height: 50}} source={{imageFile()}}/>
// or
<Image style={{width: 50, height: 50}} source={{uri:`data:image/png;base64,${imageFile}`}}/>
// or
<Image style={{width: 50, height: 50}} source={{uri:`data:image/jpg;base64,${imageFile}`}}/>
我收到警告消息: invalid prop 'source' supplied to 'Image'
。
我也收到一条错误消息
Error: You attempted to set the key `_65` with the value of 1 on an object
that is meant to be immutable and has been frozen.
由于这篇文章中的建议不起作用,我的问题可能与我从文件中提取的数据有关。
在 expo-file-system 中存储和访问 jpg 文件的正确 api 用法是什么?
我使用以下代码进行了此操作:
useEffect(() => {
if (data[spotIndex].image) {
imageFile();
}
}, [location]);
let imageFile = async () => {
if (data[spotIndex].image.length > 0) {
let uri = FileSystem.documentDirectory + data[spotIndex].image;
let getInfo = await FileSystem.getInfoAsync(uri);
getInfo && console.log(getInfo);
let options = { encoding: FileSystem.EncodingType.Base64 };
let base64 = await FileSystem.readAsStringAsync(uri, options);
setBase64Val("data:image/jpeg;base64," + base64);
}
};
<ImageBackground source={{ uri: base64Val }}>
import * as MediaLibrary from "expo-media-library";
import * as FileSystem from "expo-file-system";
<TouchableOpacity onPress={downloadImage}><Text>Download</Text></TouchableOpacity>
const downloadImage = () => {
FileSystem.downloadAsync(
'http://techslides.com/demos/sample-videos/small.mp4',
FileSystem.documentDirectory + 'small.mp4'
)
.then(({ uri }) => {
console.log('Finished downloading to ', uri);
MediaLibrary.saveToLibraryAsync(uri)
})
.catch(error => {
console.error(error);
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.