搜索文档 /

用相机拍照

现在是有趣的部分了——增加了使用电容相机拍照的功能 摄像头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按钮。如果你的电脑有任何形式的网络摄像头,就会出现一个模态窗口。有问题!

摄像头API在网上

(你的自拍可能比我的好多了)

拍了一张照片后,它就消失了。我们仍然需要在我们的应用程序中显示它,并保存它以备将来访问。

显示照片

首先,我们将创建一个新类型来定义我们的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
              >
             
              <
              /
             离子
              -
             上校
              >
             
              <
              /
             离子
              -
             
              >
             
              <
              /
             离子
              -
             网格
              >
             
              <
              
              --
             
              <
             离子
              -
             工厂
              >
             标记
              --
              >
             
              <
              /
             离子
              -
             内容
              >
复制 复制

保存所有文件。在网络浏览器中,点击相机按钮,再拍一张照片。这一次,照片显示在图片库中!

接下来,我们将添加对将照片保存到文件系统的支持,以便稍后在我们的应用程序中检索和显示它们。

以前的
您的第一个应用程序
下一个
在文件系统上保存照片
Baidu