用相机拍照
现在是有趣的部分了——增加了使用电容相机拍照的功能 摄像头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
>
<
/
离子
-
上校
>
<
/
离子
-
行
>
<
/
离子
-
网格
>
<
!
--
<
离子
-
工厂
>
标记
--
>
<
/
离子
-
内容
>
保存所有文件。在网络浏览器中,点击相机按钮,再拍一张照片。这一次,照片显示在图片库中!
接下来,我们将添加对将照片保存到文件系统的支持,以便稍后在我们的应用程序中检索和显示它们。