App crashes after taking photo from camera

Ionic Framework ionic-v3
1

Hello,

I try to take photo from camera and display it into my app but when I take photo, the app crashes and I don’t know why in code.

I have the message “The app My App was interrupted”.

Can you help me please?

Here is an extract of my TS code:

export class PhotosPage {
  public imgURI: string;

  constructor(private camera: Camera) { }

  options: CameraOptions = {
    quality: 75,
    destinationType: this.camera.DestinationType.DATA_URL,
    sourceType: this.camera.PictureSourceType.CAMERA,
    mediaType: this.camera.MediaType.PICTURE,
    allowEdit: true,
    encodingType: this.camera.EncodingType.JPEG,
    targetWidth: 300,
    targetHeight: 300,
    saveToPhotoAlbum: false
  }

  takePicture(){
    this.camera.getPicture(this.options).then(
      (imageData) => this.updateURI(imageData),
      (err) => console.log(err)
    );
  }

  updateURI(data)
  {
    this.imgURI = "data:image/jpeg;base64," + data;
  }
}

Here is an extract of my HTML code:

  <img (show)="imgURI !== undefined" src="{{imgURI}}">
  <img (show)="imgURI === undefined" src="http://placehold.it/300x300">
  <button ion-button icon-start (click)="takePicture()">
    <ion-icon name="camera"></ion-icon>
    Clic
  </button>

So more, do you have tips to debug on device in the case where application crashes?! The tool chrome://inspect/#devices is not sufficient for app crashes…

Thank you,
Clem

2

Probably unrelated, but why don’t you just assign that placeholder to imgURI so that you don’t have to have two <img> elements in the template?

3

In fact, I follow a tutorial based on Ionic 1 and AngularJS 1 and I want to make the project in Ionic @latest and Angular CLI@latest for compatibility with my device. So I have this crash problem but I don’t know how debug it.
The two <img> is from the tutorial.

4

Then it’s a terrible tutorial and you should run away.

This is not going to work. Read modern documentation. There is absolutely nothing useful for you if you want to make a modern Angular/Ionic app in Ionic-v1/AngularJS tutorials.

5

Maybe, I have not sufficient practice to judge about this code.

I’m disagree with you. For me is a good way to learn develop anything by trying to remake a old project with modern tools. You don’t follow foolishly the tutorial/guide and think about your code according modern documentation. But in this case, I am blocked because I don’t know how debug my issue.

6

You’re absolutely free to do so.

Good luck with that.

7

Thank you, I need^^

So, after preliminary investigation, I have identified the root cause of App crash. It is the option allowEdit: true,. Why this option crashes the App, I don’t know.

However, I have another problem. After taking the photo, my App restart. I read somewhere that Android kill background application when another App get foreground. Maybe is the reason.

According to your advise (rapropos), I trying to find a tutorial/guide to use camera with Ionic 3. But I found one based on Ionic 2. I’m followed it but I have the same issue that above (Restart of App). I’m lost.

Any idea?

Thank you,

8

Have you found a solution?

9

Any one found solution for same problem??

10

Sorry but I switched to subject without found solution of this one. If any solution is found, I’m interrested.

11

I would refer to @rapropos’s advice and assign the result directly to imgURI. Works in my apps