跳过主要内容
版本:v6

将照片保存到文件系统

现在,我们能够拍摄多张照片,并在我们应用程序的第二个标签上的照片库中显示它们。但是,这些照片目前尚未永久存储,因此,当关闭应用程序时,它们将被删除。

文件系统API

幸运的是,将它们保存到文件系统只需要几步。首先创建一个新的类方法,保存图片(), 在里面照相服务班级 (src/app/services/photo.service.ts)。我们通过照片对象,代表新捕获的设备照片:

私人的异步保存图片((照片照片{}

我们可以立即使用此新方法AddNewTogallery()

上市异步addNewTogallery(({
// 拍张照片
const捕获=等待相机getphoto(({
结果类型摄影Uri,,,,//基于文件的数据;提供最佳性能
资源摄影师相机,,,,//与相机自动拍摄新照片
质量100//最高质量(0至100)
};

//保存图片并将其添加到照片集中
constSavedImageFile=等待保存图片((捕获;
相片解开((SavedImageFile;
}

我们将使用电容器文件系统API将照片保存到文件系统。首先,将照片转换为base64格式,然后将数据馈送到文件系统的writefile功能。您会记得的,我们通过设置每个图像的源路径来在屏幕上显示每张照片(src属性)intab2.page.html到WebViewPath属性。因此,设置它,然后返回新的照片对象。

私人的异步保存图片((照片照片{
//将照片转换为基本64格式,文件系统API要求保存
constbase64data=等待READASBASE64((照片;

//将文件写入数据目录
const文件名=新的日期((GetTime((+'.jpeg';
constSavedfile=等待文件系统writefile(({
小路文件名,,,,
数据base64data,,,,
目录目录数据
};

//使用WebPath显示新图像,而不是Base64,因为它是
//已经加载到内存中
返回{
文件路径文件名,,,,
WebViewPath照片WebPath
};
}

READASBASE64()是我们接下来定义的辅助功能。通过单独的方法组织组织很有用,因为它需要少量的平台特定(Web vs. Mobile)逻辑 - 更多地详细介绍。目前,实现在网络上运行的逻辑:

私人的异步READASBASE64((照片照片{
//获取照片,读为斑点,然后转换为base64格式
const回复=等待拿来((照片WebPath;
const斑点=等待回复斑点((;

返回等待convertblobtobase64((斑点作为细绳;
}

私人的convertblobtobase64=((斑点斑点=>新的承诺((((解决,,,,拒绝=>{
const读者=新的FileReader((;
读者Onerror=拒绝;
读者负载=((=>{
解决((读者结果;
};
读者Readasdataurl((斑点;
};

以网络上的base64格式获取相机照片似乎比移动设备上的棘手更棘手。实际上,我们只是使用内置的Web API:拿来()作为将文件读为blob格式的整洁方法,然后是fileReader的readasdataurl()将照片斑点转换为base64。

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

Baidu