将照片保存到文件系统

我们现在能够拍摄多张照片并在应用程序的第二个选项卡上以照片库的形式显示它们。但是，这些照片目前没有被永久存储，因此在关闭应用程序时，它们将被删除。

文件系统 API

幸运的是，将它们保存到文件系统只需几个步骤。首先，在 PhotoService 类（src/app/services/photo.service.ts）中创建一个新的类方法 savePicture()。我们传入 photo 对象，它表示新捕获的设备照片

private async savePicture(photo: Photo) { }

我们可以在 addNewToGallery() 中立即使用此新方法

public async addNewToGallery() {
  // Take a photo
  const capturedPhoto = await Camera.getPhoto({
    resultType: CameraResultType.Uri, // file-based data; provides best performance
    source: CameraSource.Camera, // automatically take a new photo with the camera
    quality: 100 // highest quality (0 to 100)
  });

  // Save the picture and add it to photo collection
  const savedImageFile = await this.savePicture(capturedPhoto);
  this.photos.unshift(savedImageFile);
}

我们将使用 Capacitor 文件系统 API 将照片保存到文件系统。首先，将照片转换为 base64 格式，然后将数据馈送到文件系统的 writeFile 函数。您还记得，我们通过在 tab2.page.html 中将每个图像的源路径（src 属性）设置为 webviewPath 属性来显示屏幕上的每张照片。所以，设置它，然后返回新的 Photo 对象。

private async savePicture(photo: Photo) {
  // Convert photo to base64 format, required by Filesystem API to save
  const base64Data = await this.readAsBase64(photo);

  // Write the file to the data directory
  const fileName = Date.now() + '.jpeg';
  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
  };
}

readAsBase64() 是我们将在下一步定义的辅助函数。它很有用，因为它需要少量平台特定的（web 与移动）逻辑 - 我们将在稍后详细介绍。现在，实施在 web 上运行的逻辑

private async readAsBase64(photo: Photo) {
  // Fetch the photo, read as a blob, then convert to base64 format
  const response = await fetch(photo.webPath!);
  const blob = await response.blob();

  return await this.convertBlobToBase64(blob) as string;
}

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

在 web 上获取相机照片作为 base64 格式似乎比在移动端要难一些。实际上，我们只是在使用内置的 web API：fetch() 作为一种方便的方法将文件读取到 blob 格式，然后是 FileReader 的 readAsDataURL() 将照片 blob 转换为 base64。

就是这样！每次拍摄新照片时，它现在都会自动保存到文件系统。