Picture from camera is not displayed in view

Ionic Native
1

Hi,

I’m playing the first time with the ionic native camera.

UseCase:

  1. The user opens an modal-window (ionic-modal-component). (works!)
  2. Then he clicks on the button to take the picture. (works!)
  3. Preview picture should be displayed (not working!)

Problem:
The image is not displayed after setting the base64-string to the src-attribute.

Code:

  • picture-creator.ts
    const options: CameraOptions = {
      quality: 25,
      targetHeight: 500,
      targetWidth: 500,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }
    
    this.camera.getPicture(options).then((imageData) => {
      this.onPictureCreated.emit(imageData);
    }, (err) => {
      this.errorMessage = JSON.stringify(err);
    });
  • modal-page.ts
  onArticlePictureCreated(base64String: string){
    this.previewImage = 'data:image/jpeg;base64,' + base64String;
  }
  • modal-page.html
<ion-img [src]="previewImage"></ion-img>

remarks

  • I’m testing my mobile app currently with the Ionic DevApp. Maybe it’s a problem of DevApp to display the image?

Every hint is welcome. I guess I did almost everything and I’m running out of ideas.

Regards from Zurich
Oliver

1 Like
2

There’s a tutorial from Paul Holiday on Udemy about Ionic’s native features… he shows you how to display picture taken from an ionic native camera to html. That’s all I know about it.

3

Hi @jamesharvey

I already had a look at this course at Udemy:

But there was just a simple ‘hello world’ example, which of course works :wink:
And I did already everything and more.

But I have to mention, that I only tested my mobile app until now with the Ionic DevApp.
I never tested it on a real device.

I will test it soon on a real device, to see, whether the problem is only on the DevApp side.

4

Hi, that’s not the tutorial I’m talking about.
This one shows you exactly how to build native camera:

he shows how to display picture taken to HTML page too.
Check Camera section of this course!
I built a camera based on this course and it works just fine on my smartphone…

5

I checked out the video that you mentioned, but it did not show anything new.
I did everything already what was shown in the video.

The only difference what I saw was, that the instructor coded that camera implementation with async/await
feature. But I think this is not relevant.

So my problem is still unsolved :-/

Cheers,
Oliver

6

Finally I got the solution.

I can’t believe it that it took so long time to see it.
The problem was somewhere totally on an other place.

The problem was:

  1. the base64String parameter was always ‘undefined’
 onArticlePictureCreated(base64String: string){
    this.previewImage = 'data:image/jpeg;base64,' + base64String;
  }
  1. This happenend, because I did not pass the $event param within the html view
<picture-creator (onPictureCreated)="onPictureCreated($event)"></picture-creator>

Grrrrrr…

I think I worked to long with React :smile:

I still learn Angular.

But it happens so easy to mix different Framework-Syntax at this time… :rage:

but thanks to everyone, who had a look on it.

regards,
Oliver

1 Like