Merge pull request #3 from ionic-team/web-mobile-support

Finish cross plat support

Author: dotNetkow

src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 
 import { Platform } from '@ionic/angular';
-import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { Plugins } from '@capacitor/core';
+const { SplashScreen } = Plugins;
 
 @Component({
   selector: 'app-root',
@@ -12,7 +13,6 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 export class AppComponent {
   constructor(
     private platform: Platform,
-    private splashScreen: SplashScreen,
     private statusBar: StatusBar
   ) {
     this.initializeApp();
@@ -21,7 +21,8 @@ export class AppComponent {
   initializeApp() {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();
-      this.splashScreen.hide();
+      
+      SplashScreen.hide();
     });
   }
 }

src/app/services/photo.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Plugins, CameraResultType, Capacitor, FilesystemDirectory, CameraPhoto, CameraSource } from '@capacitor/core';
+import { Platform } from '@ionic/angular';
 
 const { Camera, Filesystem, Storage } = Plugins;
 
@@ -9,13 +10,31 @@ const { Camera, Filesystem, Storage } = Plugins;
 export class PhotoService {
   public photos: Photo[] = [];
   private PHOTO_STORAGE: string = "photos";
+  private platform: Platform;
 
-  constructor() { }
+  constructor(platform: Platform) {
+    this.platform = platform;
+   }
 
   async loadSaved() {
     // Retrieve cached photo array data
     const photos = await Storage.get({ key: this.PHOTO_STORAGE });
     this.photos = JSON.parse(photos.value) || [];
+
+    // If running on the web...
+    if (!this.platform.is('hybrid')) {
+      // Display the photo by reading into base64 format
+      for (let photo of this.photos) {
+        // Read each saved photo's data from the Filesystem
+        const readFile = await Filesystem.readFile({
+            path: photo.filepath,
+            directory: FilesystemDirectory.Data
+        });
+      
+        // Web platform only: Save the photo into the base64 field
+        photo.base64 = `data:image/jpeg;base64,${readFile.data}`;
+      }
+    }
   }
 
   /* Use the device camera to take a photo:
@@ -27,7 +46,7 @@ export class PhotoService {
   // Store a reference to all photo filepaths using Storage API:
   // https://capacitor.ionicframework.com/docs/apis/storage
   */
-  public async takePhoto() {
+  public async addNewToGallery() {
     // Take a photo
     const capturedPhoto = await Camera.getPhoto({
       resultType: CameraResultType.Uri, // file-based data; provides best performance
@@ -38,40 +57,85 @@ export class PhotoService {
     const savedImageFile = await this.savePicture(capturedPhoto);
 
     // Add new photo to Photos array
-    this.photos.unshift({
-      filepath: savedImageFile,
-      webviewPath: Capacitor.convertFileSrc(savedImageFile)
-    });
+    this.photos.unshift(savedImageFile);
 
     // Cache all photo data for future retrieval
     Storage.set({
       key: this.PHOTO_STORAGE,
-      value: JSON.stringify(this.photos)
+      value: this.platform.is('hybrid')
+              ? JSON.stringify(this.photos)  
+              : JSON.stringify(this.photos.map(p => {
+                // Don't save the base64 representation of the photo data, 
+                // since it's already saved on the Filesystem
+                const photoCopy = { ...p };
+                delete photoCopy.base64;
+
+                return photoCopy;
+                }))
     });
   }
 
   // Save picture to file on device
   private async savePicture(cameraPhoto: CameraPhoto) {
-    // Read the file into its base64 version
-    const readFile = await Filesystem.readFile({
-      path: cameraPhoto.path
-    });
+    // Convert photo to base64 format, required by Filesystem API to save
+    const base64Data = await this.readAsBase64(cameraPhoto);
 
-    // Write the file to the data directory (instead of temp storage)
+    // Write the file to the data directory
     const fileName = new Date().getTime() + '.jpeg';
     await Filesystem.writeFile({
       path: fileName,
-      data: readFile.data,
+      data: base64Data,
       directory: FilesystemDirectory.Data
     });
 
-    // Get the new, complete filepath
-    const fileUri = await Filesystem.getUri({
-      directory: FilesystemDirectory.Data,
-      path: fileName
-    });
+    // Get platform-specific photo filepaths
+    return await this.getPhotoFile(cameraPhoto, fileName);
+  }
 
-    return fileUri.uri;
+  // Read camera photo into base64 format based on the platform the app is running on
+  private async readAsBase64(cameraPhoto: CameraPhoto) {
+    // "hybrid" will detect Cordova or Capacitor
+    if (this.platform.is('hybrid')) {
+      // Read the file into base64 format
+      const file = await Filesystem.readFile({
+        path: cameraPhoto.path
+      });
+
+      return file.data;
+    }
+    else {
+      // Fetch the photo, read as a blob, then convert to base64 format
+      const response = await fetch(cameraPhoto.webPath);
+      const blob = await response.blob();
+
+      return await this.convertBlobToBase64(blob) as string;  
+    }
+  }
+
+  // Retrieve the photo metadata based on the platform the app is running on
+  private async getPhotoFile(cameraPhoto, fileName) {
+    if (this.platform.is('hybrid')) {
+      // Get the new, complete filepath of the photo saved on filesystem
+      const fileUri = await Filesystem.getUri({
+        directory: FilesystemDirectory.Data,
+        path: fileName
+      });
+
+      // Display the new image by rewriting the 'file://' path to HTTP
+      // Details: https://ionicframework.com/docs/building/webview#file-protocol
+      return {
+        filepath: fileUri.uri,
+        webviewPath: Capacitor.convertFileSrc(fileUri.uri),
+      };
+    }
+    else {
+      // Use webPath to display the new image instead of base64 since it's 
+      // already loaded into memory
+      return {
+        filepath: fileName,
+        webviewPath: cameraPhoto.webPath
+      };
+    }
   }
 
   // Delete picture by removing it from reference data and the filesystem
@@ -92,9 +156,19 @@ export class PhotoService {
       directory: FilesystemDirectory.Data
     });
   }
+
+  convertBlobToBase64 = blob => new Promise((resolve, reject) => {
+    const reader = new FileReader;
+    reader.onerror = reject;
+    reader.onload = () => {
+        resolve(reader.result);
+    };
+    reader.readAsDataURL(blob);
+  });
 }
 
 class Photo {
   filepath: string;
   webviewPath: string;
+  base64?: string;
 }

src/app/tab2/tab2.page.html

@@ -10,13 +10,13 @@
   <ion-grid>
     <ion-row>
     <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
-      <ion-img src="{{ photo.webviewPath }}" (click)="showActionSheet(photo, position)"></ion-img>
+      <ion-img src="{{ photo.base64 ? photo.base64 : photo.webviewPath }}" (click)="showActionSheet(photo, position)"></ion-img>
     </ion-col>
     </ion-row>
   </ion-grid>
 
   <ion-fab vertical="bottom" horizontal="center" slot="fixed">
-    <ion-fab-button (click)="photoService.takePhoto()">
+    <ion-fab-button (click)="photoService.addNewToGallery()">
       <ion-icon name="camera"></ion-icon>
     </ion-fab-button>
   </ion-fab>