使用相机拍照

现在是令人兴奋的部分 - 使用 Capacitor 相机 API 添加使用设备相机拍照的功能。我们先从为 Web 构建它开始，然后进行一些小的调整使其在移动设备（iOS 和 Android）上运行。

照片服务

所有 Capacitor 逻辑（相机使用和其他原生功能）将封装在一个服务类中。使用 `ionic generate` 命令创建 `PhotoService`

ionic g service services/photo

打开新的 `services/photo.service.ts` 文件，并添加将为相机功能提供动力的逻辑。首先，导入 Capacitor 依赖项并获取对 Camera、Filesystem 和 Storage 插件的引用

import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';

接下来，定义一个新的类方法 `addNewToGallery`，它将包含用于拍摄设备照片并将其保存到文件系统的核心逻辑。让我们从打开设备相机开始

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });
}

请注意这里的魔法：没有平台特定的代码（Web、iOS 或 Android）！Capacitor Camera 插件为我们抽象了这一切，只剩下一个方法调用 - `Camera.getPhoto()` - 它将打开设备的相机并允许我们拍照。

接下来，打开 `tab2.page.ts` 并导入 PhotoService 类，并添加一个调用导入服务上的 `addNewToGallery` 方法的方法

import { PhotoService } from '../services/photo.service';

constructor(public photoService: PhotoService) { }

addPhotoToGallery() {
  this.photoService.addNewToGallery();
}

然后，打开 `tab2.page.html` 并在点击/点击 FAB 时调用 `addPhotoToGallery()` 函数

<ion-content>
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="addPhotoToGallery()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

保存文件，如果它还没有运行，请通过运行 `ionic serve` 在浏览器中重新启动开发服务器。在照片库选项卡上，点击相机按钮。如果您的计算机有网络摄像头，则会出现一个模态窗口。拍张自拍！

（您的自拍可能比我的好得多）

拍摄照片后，它会立即消失。我们需要在我们的应用程序中显示它并将其保存以供将来访问。

显示照片

在 `PhotoService` 类定义（文件的最后部分）之外，创建一个新的接口 `UserPhoto` 来保存我们的照片元数据

export interface UserPhoto {
  filepath: string;
  webviewPath?: string;
}

回到文件开头，定义一个照片数组，它将包含对使用相机拍摄的每张照片的引用。

export class PhotoService {
  public photos: UserPhoto[] = [];

  // other code
}

在 `addNewToGallery` 函数中，将新拍摄的照片添加到 Photos 数组的开头。

  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera,
    quality: 100
  });

  this.photos.unshift({
    filepath: "soon...",
    webviewPath: capturedPhoto.webPath!
  });
}

接下来，移至 `tab2.page.html` 这样我们就可以在屏幕上显示图像。添加一个 网格组件，以便每张照片在照片添加到库时都能够很好地显示，并循环遍历 `PhotoServices` 的 Photos 数组中的每张照片，为每张照片添加一个图像组件 (<ion-img>)。将 `src`（源）指向照片的路径

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
        <ion-img [src]="photo.webviewPath"></ion-img>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- ion-fab markup  -->
</ion-content>

保存所有文件。在 Web 浏览器中，点击相机按钮并拍摄另一张照片。这次，照片会显示在照片库中！

接下来，我们将添加将照片保存到文件系统的支持，以便稍后可以检索和显示它们。