用相机拍照
现在是有趣的部分——添加使用电容器的设备相机拍照的能力 摄像头API ．我们将从网页平台开始，然后进行一些调整，使其能够在移动平台(iOS和Android)上运行。
摄影服务
所有电容逻辑(相机使用和其他本地特性)将被封装在一个服务类中。创建
PhotoService
使用
betway东盟体育app离子生成
命令:
＄
betway东盟体育app离子g
服务
服务/照片
打开新
服务/ photo.service.ts
文件，让我们添加逻辑，将支持相机功能。首先，导入电容依赖项并获取Camera, Filesystem和Storage插件的引用:
进口
｛
相机
，
CameraResultType
，
CameraSource
，
照片
｝
从
“@capacitor /相机”
；
进口
｛
文件系统
，
目录
｝
从
“@capacitor /文件系统”
；
进口
｛
存储
｝
从
“@capacitor /存储”
；
接下来，定义一个新的类方法，
addNewToGallery
，它将包含获取设备照片并将其保存到文件系统的核心逻辑。让我们从打开设备摄像头开始:
民众
异步
addNewToGallery
（
)
｛
//拍照
常量
capturedPhoto
＝
等待
相机
．
getPhoto
（
｛
resultType
：
CameraResultType
．
Uri
，
源
：
CameraSource
．
相机
，
质量
：
100.
｝
)
；
｝
注意这里的魔力：没有特定于平台的代码（Web，iOS或Android）！电容器相机插件向我们摘要，只需一个方法呼叫 -
Camera.getPhoto ()
-这将打开设备的相机，允许我们拍照。
接下来,打开
tab2.page.ts
并导入PhotoService类，并添加一个方法来调用
addNewToGallery
导入服务的方法:
进口
｛
PhotoService
｝
从
“. . /服务/ photo.service”
；
构造函数
（
民众
photoService
：
PhotoService
)
｛
｝
addPhotoToGallery
（
)
｛
这
．
photoService
．
addNewToGallery
（
)
；
｝
然后,打开
tab2.page.html.
并调用
addPhotoToGallery ()
函数，当点击FAB时:
<
离子内容
>
<
ion-fab
垂直
＝
＂
底
＂
水平
＝
＂
中心
＂
投币口
＝
＂
固定
＂
>
<
ion-fab-button
(点击)
＝
＂
addPhotoToGallery ()
＂
>
<
ion-icon
的名字
＝
＂
相机
＂
>
ion-icon
>
ion-fab-button
>
ion-fab
>
离子内容
>
保存文件，如果它未运行，则通过运行重新启动浏览器中的开发服务器
betway东盟体育app离子服务
．在“图片库”选项卡上，单击“相机”按钮。如果你的电脑有任何形式的网络摄像头，一个模态窗口出现。有问题!
(你的自拍可能比我的好很多)
拍完照片后，它马上就消失了。我们需要在我们的应用程序中显示它，并保存它以供将来访问。
显示照片
外的
PhotoService
类定义(文件的最底部)，创建一个新接口，
照片
，保存我们的照片元数据:
出口
接口
照片
｛
filepath
：
字符串
；
webviewPath
：
字符串
；
｝回到文件的顶部，定义一个照片数组，它将包含对Camera捕获的每张照片的引用。
出口
类
PhotoService
｛
民众
照片
：
照片
［
］
＝
［
］
；
/ /其他代码
｝
在
addNewToGallery
函数，将新捕获的照片添加到照片阵列的开头。
常量
capturedPhoto
＝
等待
相机
．
getPhoto
（
｛
resultType
：
CameraResultType
．
Uri
，
源
：
CameraSource
．
相机
，
质量
：
100.
｝
)
；
这
．
照片
．
平移
（
｛
filepath
：
“很快...”
，
webviewPath
：
capturedPhoto
．
webPath
｝
)
；
｝
接下来，移到
tab2.page.html.
所以我们可以在屏幕上显示图像。添加一个
网格组件
这样每一张照片都能很好地显示当照片被添加到图库时，并在
光刻
的照片数组，添加一个图像组件(
< ion-img >
）每个人。指出
SRC.
(来源)在照片的路径:
<
离子内容
>
<
ion-grid
>
<
ion-row
>
<
Ion-Col.
大小
＝
＂
6
＂
* ngFor
＝
＂
让照片的photoService.photos;索引作为位置
＂
>
<
ion-img
(src)
＝
＂
photo.webviewPath
＂
>
ion-img
>
Ion-Col.
>
ion-row
>
ion-grid
>
<！-离子fab标记->
离子内容
>保存所有文件。在网页浏览器中，点击Camera按钮并拍摄另一张照片。这一次，照片显示在图片库!
接下来，我们将添加对将照片保存到文件系统的支持，以便以后可以在应用程序中检索和显示它们。