搜索文件 /

从文件系统加载照片

内容

我们已经实现了照片拍摄和保存到文件系统。有一个缺少的功能:照片存储在文件系统中,但我们需要一种方法来向每个文件保存指针,以便它们可以在照片库中再次显示。

幸运的是,这很简单:我们会利用电容器 存储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的移动应用程序!

以前的
在文件系统上保存照片
下一个
添加手机
Baidu