Asynchronous passing image from camera to next page

Ionic Framework ionic-v3
1

I have used Ionic’s Camera plugin to take a picture. I wanted the picture to render on a second page, so I push the captured image to another page. The problem is, the push is called first in a split second before I take the picture, so the second page shows nothing the first time I take a picture. The 2nd time I take a picture, the first image I took is then rendered on the second page. The 2nd page just keeps showing the previous image I took, so I think it’s because the push is being called while my takePhoto() function is being called. How would I go about fixing this?

In my home.html
<button ion-button (click)="go2SecondPage()">Camera</button>

In my home.ts I have one function to take the photo and another to push the Image to the second page right after I take the photo.

go2SecondPage(){
  this.takePhoto();
  this.pushImg();
}

takePhoto(){
  const options: CameraOptions = {
  	quality: 100,
  	destinationType: this.camera.DestinationType.DATA_URL,
  	encodingType: this.camera.EncodingType.JPEG,
  	mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options).then((imageData) => {
  	this.myphoto = 'data:image/jpeg;base64,' + imageData;
  },
  (err) =>
  {
  console.log(err);
  })
 
  }

pushImg(){

  this.navCtrl.push(SecondPage, {data: this.myphoto} );
}

In my secondPage.ts

export class SecondPage {
  loadimage:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  
  
  	this.loadimage = this.navParams.get('data');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecondPage');
  }

}

and I call this in my secondPage.html
<p align="center"><img src="{{ loadimage }}"></p>

2

It might look that way to you, but it isn’t.

1 Like