Rotate image at end (performance optimization)

Surnet · Feb 16, 2018 · 6fa084e · 6fa084e
1 parent a8827e6
commit 6fa084e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 34 deletions.
diff --git a/src/classes/picture.ts b/src/classes/picture.ts
@@ -4,4 +4,5 @@ export interface Picture {
   normalizedURL: string;
   fileEntry: FileEntry;
   base64Data: string;
+  imageOrientation: number;
 }
diff --git a/src/pages/camera/camera.html b/src/pages/camera/camera.html
@@ -35,7 +35,7 @@
   <!-- Picture Display -->
   <ion-row nowrap justify-content-start align-items-center>
     <ion-col *ngFor="let picture of pictures; let i = index" col-auto>
-      <img tappable [src]="'data:image/jpeg;base64,' + picture.base64Data" class="thumbnail" (click)="editPicture(picture, i)">
+      <img tappable [src]="'data:image/jpeg;base64,' + picture.base64Data" [style.transform]="'rotate(' + picture.imageOrientation + 'deg)'" class="thumbnail" (click)="editPicture(picture, i)">
     </ion-col>
   </ion-row>
 

diff --git a/src/pages/camera/camera.ts b/src/pages/camera/camera.ts
@@ -153,10 +153,8 @@ export class CameraComponent {
   }
 
   public takePicture(): void {
+    const imageOrientation = this.getImageOrientation();
     this.cameraPreview.takePicture(this.pictureOptions)
-    .then(picture => {
-      return this.rotateImageBasedOnOrientation(picture);
-    })
     .then(picture => {
       const fileOptions: IWriteOptions = {
         replace: true
@@ -167,7 +165,8 @@ export class CameraComponent {
         this.pictures.push({
           fileEntry,
           normalizedURL,
-          base64Data: picture
+          base64Data: picture,
+          imageOrientation
         });
       })
       .catch(err => {
@@ -180,7 +179,46 @@ export class CameraComponent {
   }
 
   public finish(): void {
-    this.exit();
+    const promises = [];
+    this.pictures.forEach(picture => {
+      promises.push(
+        new Promise((resolve, reject) => {
+          rotateBase64Image(picture.base64Data, picture.imageOrientation)
+          .then(imageData => {
+            picture.imageOrientation = 0;
+            picture.base64Data = imageData;
+            picture.fileEntry.createWriter(fileWriter => {
+              fileWriter.onwriteend = () => {
+                resolve(picture);
+              };
+              fileWriter.onerror = function (e) {
+                reject(e);
+              };
+              const file: Blob = base64toBlob(imageData, 'image/jpeg');
+              fileWriter.truncate(file.size);
+              fileWriter.write(file);
+            }, err => {
+              reject(err);
+            });
+          })
+          .catch(err => {
+            reject(err);
+          });
+        })
+      );
+    });
+
+    Promise.all(promises)
+    .then(results => {
+      this.callback({
+        pictures: results
+      });
+      this.doesExit = true;
+      this.navCtrl.pop();
+    })
+    .catch(err => {
+      this.errorHandler(err);
+    });
   }
 
   public editPicture(picture: Picture, index: number): void {
@@ -251,30 +289,26 @@ export class CameraComponent {
     this.cameraPreview.stopCamera();
   }
 
-  private rotateImageBasedOnOrientation(imageData: string): Promise<string> {
+  private getImageOrientation(): number {
     if (this.deviceOrientation) {
       // If landscape
       if (Math.abs(this.deviceOrientation.x) > Math.abs(this.deviceOrientation.y)) {
         if (this.deviceOrientation.x > 0) {
-          return rotateBase64Image(imageData, 270);
+          return 270;
         } else {
-          return rotateBase64Image(imageData, 90);
+          return 90;
         }
       } else {
         // Portrait upside-down
         if (this.deviceOrientation.y < 0) {
-          return rotateBase64Image(imageData, 180);
+          return 180;
         } else {
           // Right-side up
-          return new Promise((resolve) => {
-            resolve(imageData);
-          });
+          return 0;
         }
       }
     } else {
-      return new Promise((resolve) => {
-        resolve(imageData);
-      });
+      return 0;
     }
   }
 

diff --git a/src/pages/edit/edit.html b/src/pages/edit/edit.html
@@ -21,5 +21,5 @@
 
 <!-- Content -->
 <ion-content>
-  <img [src]="'data:image/jpeg;base64,' + picture.base64Data">
+  <img [src]="'data:image/jpeg;base64,' + picture.base64Data" [style.transform]="'rotate(' + picture.imageOrientation + 'deg)'">
 </ion-content>
diff --git a/src/pages/edit/edit.ts b/src/pages/edit/edit.ts
@@ -5,9 +5,6 @@ import { NavController, NavParams } from 'ionic-angular';
 // Classes
 import { Picture } from '../../classes/picture';
 
-// Helpers
-import { base64toBlob, rotateBase64Image } from '../../helpers/picture-mutations';
-
 @Component({
   selector: 'ionic-multi-edit',
   templateUrl: 'edit.html',
@@ -42,20 +39,10 @@ export class EditComponent {
   }
 
   public rotateLeft(): void {
-    rotateBase64Image(this.picture.base64Data, 270)
-    .then(imageData => {
-      this.picture.base64Data = imageData;
-      this.picture.fileEntry.createWriter(fileWriter => {
-        const file: Blob = base64toBlob(imageData, 'image/jpeg');
-        fileWriter.truncate(file.size);
-        fileWriter.write(file);
-      }, err => {
-        console.error(err);
-      });
-    })
-    .catch(err => {
-      console.error(err);
-    });
+    this.picture.imageOrientation += 90;
+    if (this.picture.imageOrientation >= 360) {
+      this.picture.imageOrientation - 360;
+    }
   }
 
 }