Hi,
In my app I am using the camera plugin to capture a new image or load one from the gallery.
My typical add photo routine involves the following.
- add photo function in my page calls a provider.
- Inside the provider I load a ActionSheet which sets the CameraOptions.sourceType to either the camera or the photo gallery based on user choice.
- After this the provider calls the camera.getPicture which returns the picture. This is then returned to the add photo function in my page using promise.resolves.
The code works for both scenarios sort of(take new picture or select from gallery).
The Take Picture routine is great. But the Select Picture from gallery is not so.
Let me explain. I have two ion-items in my page: 1. For the Add Photo Button and 2. To display the image.
I also have a flag (camStatus )that is set to false when the page loads and the Add Photo Button is displayed using the ngIf directive when the camStatus is false and at this time the Image item is hidden using the same flag. When the picture from the gallery is available to the page the camStatus flag is set to true and this hides the Add Photo button and displays the image in the ion-item.
The take picture routine works fine and does as expected when the image is available and camStatus is set to true.
But when the Select picture routine takes place things break. Everything is as expected till the user selects the image. Now when the control comes back to the page in my app where it should display the image. The image data is returned as expected (I can see it in console.log) and the camStatus flag is set to true. So it hides the Add Photo button and triggers the image item. but the image item does not display the image. Instead I get empty item with margins. Nothing happens until I do something with the screen. For example if I rotate the screen then the image is immediately displayed as expected.
Any help is appreciated. I have tried to play around with ngZone but same results - Take New Picture is flawless and Select Picture has issues.
My code is as follows.
Page.html
type or paste code here
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form #userForm="ngForm" (ngSubmit)="saveUser(user)">
<ion-item *ngIf="!camStatus">
<button ion-button medium clear style="text-transform: none;" type="button" (click)="addPhoto()">
<ion-icon name="add-circle"></ion-icon> Add Profile Picture
</button>
</ion-item>
<ion-item *ngIf="camStatus">
<img [src]="user.img" [ngModel]="user.img" required>
</ion-item>
<ion-item>
<button type="submit" ion-button></button>
</ion-item>
</form>
</ion-content>
Page.ts
type or paste code here
import { Component, Input, NgZone} from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { MyCameraProvider} from '../../providers/my-camera/my-camera';
@IonicPage()
@Component({
selector: 'page-add-edit-user',
templateUrl: 'add-edit-user.html',
})
export class AddEditUserPage {
@Input()
user: any = {"id":0,"img":"" };
tempImg: string;
camStatus: boolean = false;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private formBuilder: FormBuilder,
private alertCtrl: AlertController,
private myCamProv: MyCameraProvider,
private ngZone: NgZone
) {
}
addPhoto(){
console.log("Add Photo");
this.ngZone.run(()=>{
this.myCamProv.CamOrGalSelector().then((val)=>{
console.log("Second : " + JSON.stringify(val));
if(val.error == false){
this.tempImg= val.tempImg;
console.log("I am in val.error If loop");
this.camStatus = true;
this.user.img = this.tempImg;
}
}
my-camera.ts
import { Injectable, Input } from '@angular/core';
import { ActionSheetController } from 'ionic-angular';
import 'rxjs/add/operator/map';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Diagnostic } from '@ionic-native/diagnostic';
/*
Generated class for the MyCameraProvider provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular DI.
*/
@Injectable()
export class MyCameraProvider {
@Input()
options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
sourceType: null,
targetHeight:800,
targetWidth: 600
};
constructor(private camera: Camera, private diagnostic: Diagnostic, private actionSheetCtrl: ActionSheetController) {
console.log('Hello MyCameraProvider Provider');
}
CamOrGalSelector(): Promise<any>{
return new Promise((resolve)=>{
let ret: any;
let actSheet = this.actionSheetCtrl.create({
title:"Add Photo Options",
buttons:[
{
text: "Take New Picture",
handler:()=>{
this.options.sourceType = 1;
this.cameraOrGalCall().then((val)=>{
console.log("New Picture: " + JSON.stringify(val));
ret=val;
resolve(ret);
})
}
},
{
text: "Select Picture from Gallery",
handler:()=>{
this.options.sourceType = 0;
this.cameraOrGalCall().then((val)=>{
console.log("Select Picture: " + JSON.stringify(val));
ret=val;
resolve(ret);
});
}
}
]
});
actSheet.present();
})
}
cameraOrGalCall():Promise<any>{
return new Promise((resolve)=>{
this.camera.getPicture(this.options).then((imageData)=>{
let tempImg: string = imageData;
console.log("tempImg: " + tempImg);
let ret = {"tempImg":tempImg, "camStatus":true, "error":false, "errorMsg":"None"};
resolve(ret);
}, (err)=>{
console.log("Camera Error.");
let ret = {"tempImg":"", "camStatus":false, "error":true, "errorMsg":JSON.stringify(err)};
resolve(ret);
})
})
};
}
Cheers,
SD