搜索文件 /

从文件系统加载照片

内容

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

幸运的是,这很简单:我们会利用电容器 存储API. 在键值存储中存储我们的一系列照片。

存储API.

首先定义一个常量变量,该变量将充当商店的密钥:


              出口
             
              班级
             
              光刻
             
              {
             
              民众
             相片
              
             照片
              [
              ]
             
              =
             
              [
              ]
              ;
             
              私人的
             
              photo_storage.
              
             
              细绳
             
              =
             
              “相片”
              ;
             
              //其他代码
             
              }
复制 复制

接下来,在结束时 addnewtogallery. 函数,添加呼叫 Storage.set() 保存照片数组。通过此处添加,每次拍摄新照片时都会存储照片阵列。这样,应用程序用户关闭或切换到不同的应用程序时无关紧要 - 所有照片数据都已保存。


             贮存
              
              
              
              {
             钥匙
              
             
              
              
              photo_storage.
              
             价值
              
             
              杰森
              
              stryify.
              
              
              
             相片
              的)
             
              }
              的)
              ;
复制 复制

使用保存的照片阵列数据,请创建一个调用的函数 loadsaved() 这可以检索该数据。我们使用相同的键以JSON格式检索照片数组,然后将其解析为数组:


              民众
             
              异步
             
              loadsaved.
              
              的)
             
              {
             
              //检索缓存的照片阵列数据
             
              Const.
             photolatis.
              =
             
              等待
             贮存
              
              得到
              
              {
             钥匙
              
             
              
              
              photo_storage.
             
              }
              的)
              ;
             
              
              
             相片
              =
             
              杰森
              
              解析
              
             photolatis.
              
             价值
              的)
             
              ||
             
              [
              ]
              ;
             
              //更多来来......
             
              }
复制 复制

在移动(即将到来!),我们可以直接设置图像标记的源 - - 到文件系统上的每个照片文件,自动显示它们。但是,在Web上,我们必须使用新的文件将每个图像从文件系统中读取到Base64格式, Base64. 物业在 照片 目的。这是因为文件系统API使用 indexeddb. 在引擎盖下。以下是您需要添加的代码 loadsaved() 您刚刚添加的功能:


              //通过读入Base64格式显示照片
             
              为了
             
              
              
             照片
              
             
              
              
             相片
              的)
             
              {
             
              //从文件系统中读取每个保存的照片的数据
             
              Const.
             readfile.
              =
             
              等待
             文件系统
              
              readfile.
              
              {
             小路
              
             照片
              
             文件路径
              
             目录
              
             目录
              
             数据
              }
              的)
              ;
             
              //仅限Web平台:将照片加载为Base64数据
             照片
              
             WebViewPath.
              =
             
               `
               数据:图像/ jpeg; base64,
                $ {
               readfile.
                
               数据
                }
               `
              ;
             
              }
复制 复制

之后,调用这种新方法 tab2.page.ts. 因此,当用户首次导航到选项卡2(照片库)时,所有照片都会加载并显示在屏幕上。


              异步
             
              ngoninit.
              
              的)
             
              {
             
              等待
             
              
              
             光刻
              
              loadsaved.
              
              的)
              ;
             
              }
复制 复制

而已!我们在我们的IONIC应用程序中建立了完整的相册功能,这些功能在Web上运行。betway东盟体育app接下来,我们会将其转换为iOS和Android的移动应用程序!

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