从文件系统加载照片
我们已经实现了照片拍摄和保存到文件系统。有一个缺少的功能:照片存储在文件系统中,但我们需要一种方法来向每个文件保存指针,以便它们可以在照片库中再次显示。
幸运的是,这很简单:我们会利用电容器 存储API. 在键值存储中存储我们的一系列照片。
存储API.
首先定义一个常量变量,它将充当商店的钥匙
usephotogallery.
功能定义
SRC /挂钩/ umerphallery.ts
:
Const.
photo_storage.
=
“相片”
;
出口
功能
usephotogallery.
(
的)
{
}
然后,使用
贮存
类以访问Get和Set Set Set方法以便读取和写入设备存储:
在结束时
拍照
函数,添加呼叫
Storage.set()
保存照片数组。通过此处添加,每次拍摄新照片时都会存储照片阵列。这样,应用程序用户关闭或切换到不同的应用程序时无关紧要 - 所有照片数据都已保存。
贮存
。
放
(
{
钥匙
:
photo_storage.
那
价值
:
杰森
。
stryify.
(
新照片
的)
}
的)
;
使用保存的照片阵列数据,我们将创建一种方法,该方法将在挂钩加载时检索数据。我们将通过使用React的作用来这样做
使用
钩。将其插入上面
拍照
宣言。这是代码,我们会缩小它:
使用
(
(
的)
=>
{
Const.
loadsaved.
=
异步
(
的)
=>
{
Const.
{
价值
}
=
等待
贮存
。
得到
(
{
钥匙
:
photo_storage.
}
的)
;
Const.
Photosinstorage.
=
(
价值
还
杰森
。
解析
(
价值
的)
:
[
]
的)
作为
yserphoto.
[
]
;
为了
(
让
照片
的
Photosinstorage.
的)
{
Const.
文件
=
等待
文件系统
。
readfile.
(
{
小路
:
照片
。
文件路径
那
目录
:
目录
。
数据
那
}
的)
;
//仅限Web平台:将照片加载为Base64数据
照片
。
WebViewPath.
=
`
数据:图像/ jpeg; base64,
$ {
文件
。
数据
}
`
;
}
设置
(
Photosinstorage.
的)
;
}
;
loadsaved.
(
的)
;
}
那
[
]
的)
;
这似乎起初有点可怕,所以让我们走过它,首先通过查看我们进入钩子的第二个参数:依赖数组
[]
。
默认情况下,使用effeffect钩子每次都会调用组件渲染,除非我们传入依赖关系阵列。在这种情况下,它只在更新依赖项时运行。在我们的情况下,我们只希望它被调用一次。通过将不会更改的空数组,我们可以阻止钩子被调用多次。
第一个参数
使用
是将通过效果调用的函数。我们通过匿名箭头函数,并且我们内部我们定义另一个异步方法,然后立即调用此方法。我们必须从钩子内调用Async函数,因为挂钩回调不能异步本身。
在移动(即将到来!),我们可以直接设置图像标记的源 -
- 到文件系统上的每个照片文件,自动显示它们。但是,在Web上,我们必须将每个图像从文件系统读入Base64格式,因为文件系统API将它们存储在Base64中
indexeddb.
在引擎盖下。
就是这样!我们在我们的IONIC应用程序中建立了完整的相册功能,这些功能在Web上运行。betway东盟体育app接下来,我们会将其转换为iOS和Android的移动应用程序!