ionic3 @ionic-native/camera don't show the picture

Question

the camera works but it's not showing the picture. I've followed some solutions but nothign seems work, maybe is the ionic3 version?

Before i was able to take a picture, now button launch on debug chrome 'Illegal Argument Exception'

UPDATE: The problem was when telephone is connect in mode USB, and debug mode, the sd card is not enable to save pictures. So when you run:

ionic cordova run android

you must turn off the mode Debug

I can't solve to show the picture,

here the files:

photo.ts

import { Component } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { MainPage } from '../../pages/pages';
import { Vibration } from '@ionic-native/vibration';
import { AuthenticationService } from '../../providers/authentication.service';
import { Camera, CameraOptions } from '@ionic-native/camera';

import { TranslateService } from '@ngx-translate/core';

import {Observable} from 'rxjs/Rx';
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html'
})
export class PhotoPage {

  // imageData is a base64 encoded string
  public base64Image: string;


  constructor(public navCtrl: NavController,
    public toastCtrl: ToastController,
    private camera: Camera

  ) {

  }

  ngOnInit() {
  }

  takePicture(){
    let options = {
      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.base64Image = "data:image/jpeg;base64," + imageData;

        let cameraImageSelector = document.getElementById('camera-image');
        cameraImageSelector.setAttribute('src', this.base64Image);

      })
      .catch(err=>{
        console.log(err);
      })
  }
}

this is another file: photo.html

<ion-header>

  <ion-navbar>
    <ion-title>Photo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <img [src]="base64Image" *ngIf="base64Image" />

  <ion-fab bottom right>
    <button ion-fab color="secondary" (click)="takePicture()"><ion-icon name="camera"></ion-icon></button>
  </ion-fab>
</ion-content>

this is another file:

app.module.ts

...import { Camera } from '@ionic-native/camera';
...
@NgModule({
  ...
  providers: [
  ..
    Camera

Answer 1

I had similar issue. Below is my code . Hope it helps you

Camera app

  <button (click)="takePicture()">Take a Picture</button>

  Latest Picture:
  <img [src]="base64Image" *ngIf="base64Image" />
</ion-card-content>

Options:

const options: CameraOptions = {
     targetWidth: 300,
     targetHeight: 300,
     quality: 100,
     destinationType: this.camera.DestinationType.DATA_URL,
     encodingType: this.camera.EncodingType.JPEG,
     mediaType: this.camera.MediaType.PICTURE
}

Answer 2

I find the solutions, need use DomSanitizer, because need to update the image from another zone, now the problem sometimes i can take a picture, display the image, but doing again, second or third time the app get close without error or show an error 'error on app' and get close,

I feel ionic cordova is not the same to develop in real platafform? any idea

photo.ts

   import { Component } from '@angular/core';
    import { NavController, ToastController } from 'ionic-angular';
    import { MainPage } from '../../pages/pages';
    import { AuthenticationService } from '../../providers/authentication.service';
    import { Camera, CameraOptions } from '@ionic-native/camera';
    import { DomSanitizer } from '@angular/platform-browser';


    import { TranslateService } from '@ngx-translate/core';

    import {Observable} from 'rxjs/Rx';
    @Component({
      selector: 'page-photo',
      templateUrl: 'photo.html'
    })
    export class PhotoPage {

      // imageData is a base64 encoded string
      public htmlImageFromCamera: string;

      constructor(public navCtrl: NavController,
        //public toastCtrl: ToastController,
        private camera: Camera,
        private DomSanitizer: DomSanitizer

      ) {

      }

      ngOnInit() {
      }

      takePicture(){
        console.log('take picture');
        let options = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE
          //saveToPhotoAlbum: false

        };

        this.camera.getPicture(options)
         .then((imageData)=>{
           console.log('end take picture');
            this.htmlImageFromCamera = "data:image/jpeg;base64," + imageData;
          })
          .catch(err=>{
            console.log(err);
            alert(err);
          })
      }
    }

photo.html

<ion-header>

  <ion-navbar>
    <ion-title>Photo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-card-content>
  Latest Picture:
  <img src="../../assets/img/sarah-avatar.png.jpeg" id ="myimg">
    <img [src]="DomSanitizer.bypassSecurityTrustUrl(htmlImageFromCamera)" *ngIf="htmlImageFromCamera" />
  </ion-card-content>
  <button ion-button round (click)="takePicture()">Take a Picture</button>
</ion-content>