diff --git a/src/classes/picture.ts b/src/classes/picture.ts index 4b3d744..886781c 100644 --- 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 index 57eb61e..e93b8ca 100644 --- a/src/pages/camera/camera.html +++ b/src/pages/camera/camera.html @@ -35,7 +35,7 @@ - + diff --git a/src/pages/camera/camera.ts b/src/pages/camera/camera.ts index 60063f7..2fccedf 100644 --- 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 { + 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 index d5591c4..72f6efb 100644 --- a/src/pages/edit/edit.html +++ b/src/pages/edit/edit.html @@ -21,5 +21,5 @@ - + diff --git a/src/pages/edit/edit.ts b/src/pages/edit/edit.ts index a17d33d..fc2f992 100644 --- 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; + } } }