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

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

ファイルシステムAPI

幸いなことに、ファイルシステムへの保存はわずか数ステップで完了します。まず、usePhotoGalleryフック（src/hooks/usePhotoGallery.ts）を開き、FilesystemクラスからwriteFileメソッドにアクセスします。

注

最初はwriteFileメソッドを使用しますが、すぐに他のメソッドも使用するので、ここでインポートしておきます。

次に、usePhotoGalleryに新しい関数をいくつか作成します。

export function usePhotoGallery() {
  const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
    const base64Data = await base64FromPath(photo.webPath!);
    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,
    };
  };
}

export async function base64FromPath(path: string): Promise<string> {
  const response = await fetch(path);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onload = () => {
      if (typeof reader.result === 'string') {
        resolve(reader.result);
      } else {
        reject('method did not return a string');
      }
    };
    reader.readAsDataURL(blob);
  });
}

注

base64FromPathメソッドは、指定されたパスからファイルをダウンロードし、そのファイルのbase64表現を返すヘルパーユーティリティです。

新しくキャプチャしたデバイスの写真を表すphotoオブジェクトと、ファイルを保存するパスを提供するfileNameを渡します。

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

最後に、takePhotoメソッドのsetPhotosの呼び出しのすぐ下で、savePictureを呼び出し、写真オブジェクトとファイル名を渡します。メソッド全体を以下に示します。

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);
  const newPhotos = [savedFileImage, ...photos];
  setPhotos(newPhotos);
};

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