ionic3 @ionic-native/camera 不显示图片

Question

相机工作正常，但不显示图片。我遵循了一些解决方案，但似乎没有任何效果，也许是ionic3版本？

之前我可以拍照，现在按钮在调试时启动 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

我无法解决显示图片，

这里是文件：

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);
      })
  }
}

这是另一个文件： 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>

这是另一个文件：

app.module.ts

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

Answer 1

我有类似的问题。下面是我的代码。希望对你有帮助

相机应用

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

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

选项：

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

我找到了解决方案，需要使用 DomSanitizer，因为需要从另一个区域更新图像，现在的问题是有时我可以拍照，显示图像，但是再次执行，第二次或第三次应用程序关闭没有错误或显示错误 'error on app' 并接近，

感觉ionic cordova在real platafform上开发不一样？任何想法

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>

ionic3 @ionic-native/camera 不显示图片

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

ionic3