将照片保存到文件系统
我们现在可以拍摄多张照片,并将它们显示在应用程序第二个选项卡上的照片库中。然而,这些照片目前并没有被永久存储,因此当应用程序关闭时,它们将丢失。
文件系统API
幸运的是,将它们保存到文件系统只需要几个步骤。首先打开
usePhotoGallery
作用(
src/composables/usePhotoGallery.ts
),并访问
写文件
方法从
文件系统
类别:
接下来,创建两个新函数。文件系统API要求将写入磁盘的文件作为base64数据传入,因此,稍后将使用此helper函数来帮助:
常数
转换BlobToBase64
=
(
斑点
:
斑点
)
=>
刚出现的
许诺
(
(
决定
,
拒绝
)
=>
{
常数
读者
=
刚出现的
字符流
(
)
;
读者
.
一个错误
=
拒绝
;
读者
.
装载
=
(
)
=>
{
决定
(
读者
.
后果
)
;
}
;
读者
.
编码数据
(
斑点
)
;
}
)
;
接下来,添加一个将照片保存到文件系统的函数。我们在街上经过
摄影照片
对象,它表示新捕获的设备照片以及文件名,该文件名将为要存储到的文件提供路径。
接下来我们使用电容器
文件系统API
将照片保存到文件系统。我们首先将照片转换为base64格式,然后将数据提供给文件系统的
写文件
功能:
常数
保存图片
=
异步的
(
照片
:
摄影照片
,
文件名
:
一串
)
:
许诺
<
照片
>
=>
{
允许
Base64数据
:
一串
;
//获取照片,读取为blob,然后转换为base64格式
常数
回答
=
等候
取来
(
照片
.
网页
!
)
;
常数
斑点
=
等候
回答
.
斑点
(
)
;
Base64数据
=
等候
转换BlobToBase64
(
斑点
)
像
一串
;
常数
保存文件
=
等候
文件系统
.
写文件
(
{
路径
:
文件名
,
数据
:
Base64数据
,
目录
:
目录
.
数据
}
)
;
//使用网页显示新图像,而不是base64,因为它是
//已加载到内存中
回来
{
文件路径
:
文件名
,
webviewPath
:
照片
.
网页
}
;
}
最后,更新
拍照
要调用的函数
保存图片
. 保存照片后,将其插入照片的正面
照片
数组:
常数
拍照
=
异步的
(
)
=>
{
常数
摄影照片
=
等候
照相机
.
获取照片
(
{
结果类型
:
摄影机结果类型
.
Uri
,
来源
:
摄像源
.
照相机
,
质量
:
100
}
)
;
常数
文件名
=
刚出现的
日期
(
)
.
获得时间
(
)
+
“.jpeg”
;
常数
savedFileImage
=
等候
保存图片
(
摄影照片
,
文件名
)
;
照片
.
价值
=
[
savedFileImage
,
...
照片
.
价值
]
;
}
;
好了!每次拍摄新照片时,它都会自动保存到文件系统中。