搜索文档 /

从文件系统加载照片

内容

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

幸运的是,这很简单:我们将利用电容器 存储API 将我们的照片数组存储在一个键值存储中。

存储API

首先定义一个常量变量,作为store的键:


              出口
             
              
             
              PhotoService
             
              
             
              公共
             照片
              
             照片
              
              
             
              
             
              
              
              
             
              私人
             
              PHOTO_STORAGE
              
             
              字符串
             
              
             
              “照片”
              
             
              / /其他代码
             
              
复制 复制

接下来,在结尾 addNewToGallery 函数,添加对的调用 Storage.set () 保存Photos数组。通过在这里添加它,每次拍摄新照片时都会存储Photos数组。这样,当应用程序用户关闭或切换到不同的应用程序时,所有的照片数据都会被保存。


             存储
              
              
              
              
             关键
              
             
              
              
              PHOTO_STORAGE
              
             价值
              
             
              JSON
              
              stringify
              
              
              
             照片
              
             
              
              
              
复制 复制

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


              公共
             
              异步
             
              loadSaved
              
              
             
              
             
              //获取缓存的照片数组数据
             
              常量
             photoList
              
             
              等待
             存储
              
              得到
              
              
             关键
              
             
              
              
              PHOTO_STORAGE
             
              
              
              
             
              
              
             照片
              
             
              JSON
              
              解析
              
             photoList
              
             价值
              
             
              ||
             
              
              
              
             
              //更多……
             
              
复制 复制

在移动端(下一个!),我们可以直接设置图像的来源标签- < img src = " x " / > -到文件系统上的每个照片文件,自动显示它们。然而,在web上,我们必须使用一个新的 base64 财产的 照片 对象。这是因为Filesystem API使用了 IndexedDB 在引擎盖下。下面是您需要添加到 loadSaved () 你刚刚添加的函数:


              //通过读取base64格式显示照片
             
              
             
              
              
             照片
              
             
              
              
             照片
              
             
              
             
              //从文件系统中读取每个保存的照片的数据
             
              常量
             readFile
              
             
              等待
             文件系统
              
              readFile
              
              
             路径
              
             照片
              
             filepath
              
             目录
              
             目录
              
             数据
              
              
              
             
              //仅Web平台:加载照片作为base64数据
             照片
              
             webviewPath
              
             
               
               数据:图像/ jpeg; base64,
                $ {
               readFile
                
               数据
                
               
              
             
              
复制 复制

之后,调用这个新方法 tab2.page.ts 这样,当用户第一次导航到Tab 2(照片库)时,所有照片都被加载并显示在屏幕上。


              异步
             
              ngOnInit
              
              
             
              
             
              等待
             
              
              
             photoService
              
              loadSaved
              
              
              
             
              
复制 复制

就是这样!我们已经在我们的Ionic应用程序中建立了一个完整的图片库功能,可以在网络上运行。betway东盟体育app接下来,我们将把它转化为iOS和Android的移动应用程序!

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