搜索文档 /

用相机拍照

现在是有趣的部分了——增加了使用电容相机拍照的功能 摄像头API .我们将从面向网页开发游戏开始,然后对其进行微调,使其能够运行于移动平台(iOS和Android)。

为此,我们将创建自己的自定义React钩子来管理图库中的照片。

如果你不熟悉React Hooks, 引入反应钩子 官方的React文档是一个很好的开始资源。

创建一个新文件 src /钩/ usePhotoGallery.ts 把它打开。

自定义钩子只是一个使用其他React钩子的函数。这就是我们要做的!我们将从导入各种钩子和工具开始,我们将从React core,离子反应钩子项目和电容器中使用:betway东盟体育app


              进口
             
              
             useState
              
             useEffect
              
             
              
             
              “反应”
              
             
              进口
             
              
             isPlatform
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             
              
             相机
              
             CameraResultType
              
             CameraSource
              
             照片
              
             
              
             
              
             
              “@capacitor /相机”
              
             
              进口
             
              
             文件系统
              
             目录
              
             
              
             
              “@capacitor /文件系统”
              
             
              进口
             
              
             存储
              
             
              
             
              “@capacitor /存储”
              
             
              进口
             
              
             电容器
              
             
              
             
              “@capacitor /核心”
              
复制 复制

接下来,创建一个名为usphotogallery的函数:


              出口
             
              函数
             
              usePhotoGallery
              
              
             
              
             
              常量
             
              takePhoto
             
              
             
              异步
             
              
              
             
              =>
             
              
             
              常量
             cameraPhoto
              
             
              等待
             相机
              
              getPhoto
              
              
             resultType
              
             CameraResultType
              
             Uri
              
             
              
             CameraSource
              
             相机
              
             质量
              
             
              One hundred.
              
             
              
              
              
             
              
              
             
              返回
             
              
             takePhoto
              
             
              
              
             
              
复制 复制

我们的 usePhotoGallery 钩子公开了一个名为takphoto的方法,该方法又调用了Capactior的getPhoto方法。

注意这里的神奇之处:没有特定平台的代码(网页、iOS或Android)!电容相机插件为我们抽象了这一点,只留下一个方法调用- getPhoto () -这会打开设备的摄像头,让我们可以拍照。

我们需要采取的最后一步是使用Tab2页面中的新钩子。回到Tab2。TSX并导入钩子:


              进口
             
              
             usePhotoGallery
              
             
              
             
              “. . /钩/ usePhotoGallery”
              
复制 复制

在函数组件的return语句之前,访问 takePhoto 方法:


              常量
             Tab2
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
              常量
             
              
             takePhoto
              
             
              
             
              usePhotoGallery
              
              
              
             
              //代码的剩余部分
复制 复制

保存文件,如果还没有保存,可以通过运行来重新启动浏览器中的开发服务器 betway东盟体育app离子服务 .在Photo Gallery选项卡上,单击Camera按钮。如果你的电脑有任何形式的网络摄像头,就会出现一个模态窗口。有问题!

摄像头API在网上

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

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

显示照片

首先,我们将创建一个新类型来定义我们的Photo,它将保存特定的元数据。将下面的Photo接口添加到 usePhotoGallery.ts 文件,在主函数之外的某个地方:


              出口
             
              接口
             
              UserPhoto
             
              
             filepath
              
             
              字符串
              
             webviewPath
              
              
             
              字符串
              
             
              
复制 复制

回到函数的顶部(就在调用 usePhotoGallery ,我们将定义一个状态变量来存储使用Camera捕获的每张照片的数组。


              常量
             
              
             照片
              
             setPhotos
              
             
              
             useState
              <
             UserPhoto
              
              
              >
              
              
              
              
              
复制 复制

当相机完成拍照,从电容器返回的结果cameraphot将存储在 照片 变量。我们想要创建一个新的照片对象并将其添加到照片状态数组中。我们通过创建一个新数组来确保不会意外地改变当前的photos数组,然后调用 setPhotos 将数组存储为状态。更新 takePhoto 方法,并在getPhoto调用后添加以下代码:


              常量
             文件名
              
             
              
             
              日期
              
              
              
              取得时间
              
              
             
              +
             
              “jpeg”
              
             
              常量
             newPhotos
              
             
              
             
              
             filepath
              
             文件名
              
             webviewPath
              
             cameraPhoto
              
             webPath
              
             
              
              
             
              ...
             照片
              
             
              
              
             
              setPhotos
              
             newPhotos
              
              
复制 复制

接下来,让我们从钩子中暴露photos数组。更新返回语句以包含照片:


              返回
             
              
             照片
              
             takePhoto
              
             
              
              
复制 复制

回到Tab2组件,访问照片:


              常量
             
              
             照片
              
             takePhoto
              
             
              
             
              usePhotoGallery
              
              
              
复制 复制

通过将照片存储到主数组中,我们可以在屏幕上显示图像。添加一个 网格组件 以便在照片添加到图库时,每张照片都能很好地显示,并在photos数组中对每张照片进行循环,添加一个Image组件( < IonImg > )为每个。点的 src (source)到照片的路径:


              <
             IonContent
              >
             
              <
             IonGrid
              >
             
              <
             IonRow
              >
             
              
             照片
              
              地图
              
              
              照片
               
              指数
              
             
              =>
             
              
             
              <
             IonCol大小
              
              “6”
             关键
              
              
             指数
              
              >
             
              <
             IonImg src
              
              
             照片
              
             webviewPath
              
             
              /
              >
             
              <
              /
             IonCol
              >
             
              
              
              
             
              <
              /
             IonRow
              >
             
              <
              /
             IonGrid
              >
             
              <
              
              --
             
              <
             IonFab
              >
             标记
              --
              >
             
              <
              /
             IonContent
              >
复制 复制

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

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

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