使用相機拍照

現在是好玩的部分 - 使用 Capacitor Camera API 新增使用裝置相機拍照的功能。 我們將從為網頁建置開始，然後進行一些小調整以使其在行動裝置（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
  });
}

請注意這裡的魔法：沒有平台特定的程式碼（網頁、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 函式中，將新拍攝的相片新增至相片陣列的開頭。

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

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

接下來，移至 tab2.page.html，以便我們可以在螢幕上顯示影像。 新增一個 Grid 元件，以便每張相片在相片新增到圖庫時都能正常顯示，並迴圈遍歷 PhotoServices 的相片陣列中的每張相片，為每張相片新增一個影像元件（<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>

儲存所有檔案。 在網頁瀏覽器中，按一下「相機」按鈕並再拍一張相片。 這次，相片會顯示在相片庫中！

接下來，我們將新增對將相片儲存到檔案系統的支援，以便稍後可以擷取並顯示在我們的應用程式中。