搜索文档 /

将照片保存到文件系统

我们现在可以拍摄多张照片,并将它们显示在应用程序的第二个标签的照片库中。然而,这些照片目前并没有被永久存储,所以当应用程序关闭时,它们将被删除。

文件系统API

幸运的是,将它们保存到文件系统只需要几个步骤。首先创建一个新的类方法, savePicture () ,在 PhotoService 类( src /应用程序/服务/ photo.service.ts ).我们从 cameraPhoto 对象,它表示新捕获的设备照片:


              私人
             
              异步
             
              savePicture
              
              cameraPhoto
               
              CameraPhoto
              
             
              
             
              
复制 复制

我们可以立即使用这个新方法 addNewToGallery ()


              公共
             
              异步
             
              addNewToGallery
              
              
             
              
             
              //拍照
             
              常量
             capturedPhoto
              
             
              等待
             相机
              
              getPhoto
              
              
             resultType
              
             CameraResultType
              
             Uri
              
             
              / /文件的数据;提供了最好的性能
             
              
             CameraSource
              
             相机
              
             
              //自动用相机拍一张新照片
             质量
              
             
              One hundred.
             
              //最高质量(0到100)
             
              
              
              
             
              //保存图片并将其添加到照片集合
             
              常量
             savedImageFile
              
             
              等待
             
              
              
              savePicture
              
             capturedPhoto
              
              
             
              
              
             照片
              
              平移
              
             savedImageFile
              
              
             
              
复制 复制

我们将使用电容器 文件系统API 将照片保存到文件系统中。首先,将照片转换为base64格式,然后将数据提供给Filesystem writeFile 函数。如您所知,我们通过设置每张图片的源路径( src 属性) tab2.page.html 到webviewPath属性。因此,设置它,然后返回新的Photo对象。


              私人
             
              异步
             
              savePicture
              
              cameraPhoto
               
              CameraPhoto
              
             
              
             
              //将照片转换为base64格式,文件系统API需要保存
             
              常量
             base64Data
              
             
              等待
             
              
              
              readAsBase64
              
             cameraPhoto
              
              
             
              //写入数据目录
             
              常量
             文件名
              
             
              
             
              日期
              
              
              
              取得时间
              
              
             
              +
             
              “jpeg”
              
             
              常量
             savedFile
              
             
              等待
             文件系统
              
              writeFile
              
              
             路径
              
             文件名
              
             数据
              
             base64Data
              
             目录
              
             目录
              
             数据
              
              
              
             
              //使用webPath来显示新图像,而不是base64,因为它是
             
              //已加载到内存
             
              返回
             
              
             filepath
              
             文件名
              
             webviewPath
              
             cameraPhoto
              
             webPath
              
              
             
              
复制 复制

readAsBase64 () 是我们接下来将定义的辅助函数。通过一个单独的方法进行组织是很有用的,因为它需要少量的特定于平台的逻辑(web vs. mobile)—更多的在这一点上。现在,实现在web上运行的逻辑:


              私人
             
              异步
             
              readAsBase64
              
              cameraPhoto
               
              CameraPhoto
              
             
              
             
              //获取照片,读取为一个blob,然后转换为base64格式
             
              常量
             响应
              
             
              等待
             
              获取
              
             cameraPhoto
              
             webPath
              
              
              
             
              常量
             
              
             
              等待
             响应
              
              
              
              
              
             
              返回
             
              等待
             
              
              
              convertBlobToBase64
              
             
              
             
              作为
             
              字符串
              
             
              
             
              convertBlobToBase64
             
              
             
              
              
               
              
              
             
              =>
             
              
             
              承诺
              
              
              解决
               
              拒绝
              
             
              =>
             
              
             
              常量
             读者
              
             
              
             
              FileReader
              
             读者
              
             onerror
              
             拒绝
              
             读者
              
              onload
             
              
             
              
              
             
              =>
             
              
             
              解决
              
             读者
              
             结果
              
              
             
              
              
             读者
              
              readAsDataURL
              
             
              
              
             
              
              
              
复制 复制

在网上以base64格式获取相机照片似乎比在移动设备上要困难一些。实际上,我们只是在使用内置的web api: fetch () 将文件读取为blob格式,然后是FileReader readAsDataURL () 将photo blob转换为base64。

我们走吧!现在,每次拍摄新照片时,它都会自动保存到文件系统中。

以前的
拍照
下一个
在文件系统中加载照片
Baidu