用相机拍照
现在是有趣的部分了——增加了使用电容相机拍照的功能 摄像头API ．我们将从面向网页开发游戏开始，然后对其进行微调，使其能够运行于移动平台(iOS和Android)。
为此，我们将与Vue的composition API一起创建一个独立的composition函数来管理图库中的照片。
如果您不熟悉Vue的Composition API， 为什么API组成? 从官方Vue文档中获取的是一个很好的开始资源。
创建一个新文件
src /可组合/ usePhotoGallery.ts
把它打开。
我们将从导入Vue core和Capacitor中使用的各种实用工具开始:
进口
｛
裁判
，
onMounted
，
看
｝
从
“vue”
；
进口
｛
相机
，
CameraResultType
，
CameraSource
，
照片
｝
从
“@capacitor /相机”
；
进口
｛
文件系统
，
目录
｝
从
“@capacitor /文件系统”
进口
｛
存储
｝
从
“@capacitor /存储”
接下来，创建一个名为usphotogallery的函数:
出口
函数
usePhotoGallery
（
）
｛
常量
takePhoto
＝
异步
（
）
＝＞
｛
常量
cameraPhoto
＝
等待
相机
．
getPhoto
（
｛
resultType
：
CameraResultType
．
Uri
，
源
：
CameraSource
．
相机
，
质量
：
One hundred.
｝
）
；
｝
；
返回
｛
takePhoto
｝
；
｝
我们的
usePhotoGallery
函数公开了一个名为takphoto的方法，该方法反过来调用了Capacitor Camera API
getPhoto
方法。
注意这里的神奇之处:没有特定平台的代码(网页、iOS或Android)!电容相机插件为我们抽象了这一点，只留下一个方法调用-
getPhoto ()
-这会打开设备的摄像头，让我们可以拍照。
我们需要采取的最后一步是使用Tab2页面中的新函数。回到Tab2。vue and import it:
进口
｛
usePhotoGallery
｝
从
“@ /可组合/ usePhotoGallery”
；
接下来，在默认导出中添加一个设置方法
构成API
．变性的
takePhoto
函数
usePhotoGallery
，然后返回:
<
脚本朗
＝
“t”
>
进口
｛
相机
，
垃圾
，
关闭
｝
从
“betway东盟体育appionicons /图标”
；
进口
｛
IonPage
，
IonHeader
，
IonFab
，
IonFabButton
，
betway东盟体育appIonIcon
，
IonToolbar
，
IonTitle
，
IonContent
，
IonGrid
，
IonRow
，
IonCol
，
IonImg
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
usePhotoGallery
｝
从
“@ /可组合/ usePhotoGallery”
；
出口
默认的
｛
的名字
：
“Tab2”
，
组件
：
｛
IonPage
，
IonHeader
，
IonFab
，
IonFabButton
，
betway东盟体育appIonIcon
，
IonToolbar
，
IonTitle
，
IonContent
，
IonGrid
，
IonRow
，
IonCol
，
IonImg
｝
，
设置
（
）
｛
常量
｛
takePhoto
｝
＝
usePhotoGallery
（
）
；
返回
｛
takePhoto
，
相机
，
垃圾
，
关闭
｝
｝
｝
<
/
脚本
>
保存文件，如果还没有保存，可以通过运行来重新启动浏览器中的开发服务器
betway东盟体育app离子服务
．在Photo Gallery选项卡上，单击Camera按钮。如果你的电脑有任何形式的网络摄像头，就会出现一个模态窗口。有问题!
(你的自拍可能比我的好多了)
拍了一张照片后，它就消失了。我们仍然需要在我们的应用程序中显示它，并保存它以备将来访问。
显示照片
首先，我们将创建一个新类型来定义我们的Photo，它将保存特定的元数据。将下面的Photo接口添加到
usePhotoGallery.ts
文件，在主函数之外的某个地方:
出口
接口
UserPhoto
｛
filepath
：
字符串
；
webviewPath
？
：
字符串
；
｝回到函数的顶部(在引用了Capacitor Camera插件之后)，定义一个数组，这样我们就可以存储相机捕获的每张照片。使用Vue's使其成为反应性变量 ref函数 ．
常量
照片
＝
裁判
<
UserPhoto
［
］
>
（
［
］
）
；
当相机拍完一张照片，结果
CameraPhoto
从电容器返回将被添加到
照片
数组中。更新
takePhoto
方法后添加此代码
Camera.getPhoto
线:
常量
文件名
＝
新
日期
（
）
．
取得时间
（
）
+
“jpeg”
；
常量
savedFileImage
＝
｛
filepath
：
文件名
，
webviewPath
：
cameraPhoto
．
webPath
｝
；
照片
．
价值
＝
［
savedFileImage
，
.．.
照片
．
价值
］
；接下来，更新return语句以包含photos数组:
返回
｛
照片
，
takePhoto
｝
；
回到Tab2组件中，更新import语句以包含
照片
接口:
进口
｛
usePhotoGallery
，
UserPhoto
｝
从
“@ /可组合/ usePhotoGallery”
；然后，访问照片数组:
常量
｛
照片
，
takePhoto
｝
＝
usePhotoGallery
（
）
；
最后,添加
照片
来
设置()
返回:
返回
｛
照片
，
takePhoto
，
相机
，
垃圾
，
关闭
｝
将照片存储到主数组后，我们现在可以在屏幕上显示图像了。添加一个
网格组件
以便每一张照片在添加到图库时都能很好地显示，并在Photos数组中对每一张照片进行循环，添加一个Image组件(
< ion-img >
)为每个。点的
src
(source)到照片的路径:
<
离子
-
内容
>
<
离子
-
网格
>
<
离子
-
行
>
<
离子
-
坳大小
＝
“6”
：
关键
＝
“照片”
v
-
为
＝
“照片照片”
>
<
离子
-
img
：
src
＝
“photo.webviewPath”
>
<
/
离子
-
img
>
<
/
离子
-
上校
>
<
/
离子
-
行
>
<
/
离子
-
网格
>
<
！
--
<
离子
-
工厂
>
标记
--
>
<
/
离子
-
内容
>保存所有文件。在网络浏览器中，点击相机按钮，再拍一张照片。这一次，照片显示在图片库中!
接下来，我们将添加对将照片保存到文件系统的支持，以便稍后在我们的应用程序中检索和显示它们。