ファイルシステムへの写真の保存

複数の写真を撮影し、アプリの2番目のタブにあるフォトギャラリーに表示できるようになりました。ただし、これらの写真は現在永続的に保存されていないため、アプリを閉じると失われます。

ファイルシステムAPI

幸いにも、ファイルシステムに保存するには、ほんの数ステップで済みます。`usePhotoGallery` 関数 (`src/composables/usePhotoGallery.ts`) を開いてください。

ファイルシステムAPIでは、ディスクに書き込まれるファイルがbase64データとして渡される必要があるため、このヘルパー関数は、その処理を支援するためにすぐに使用されます。

const convertBlobToBase64 = (blob: Blob) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      resolve(reader.result);
    };
    reader.readAsDataURL(blob);
  });

次に、写真をファイルシステムに保存する関数を追加します。新しくキャプチャされたデバイスの写真を表す `photo` オブジェクトと、ファイルの保存パスを提供する `fileName` を渡します。

次に、Capacitor ファイルシステムAPI を使用して、写真をファイルシステムに保存します。最初に写真をbase64形式に変換し、次にデータをファイルシステムの `writeFile` 関数に渡します。

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(photo.webPath!);
  const blob = await response.blob();
  const base64Data = (await convertBlobToBase64(blob)) as string;

  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data,
  });

  // Use webPath to display the new image instead of base64 since it's
  // already loaded into memory
  return {
    filepath: fileName,
    webviewPath: photo.webPath,
  };
};

最後に、`takePhoto` 関数を更新して `savePicture` を呼び出します。写真が保存されたら、リアクティブな `photos` 配列の先頭に挿入します。

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

  const fileName = Date.now() + '.jpeg';
  const savedFileImage = await savePicture(photo, fileName);

  photos.value = [savedFileImage, ...photos.value];
};

これで完了です！新しい写真が撮影されるたびに、自動的にファイルシステムに保存されるようになりました。