Question

相机正常工作，但它没有显示图片。我已经采取了一些解决方案，但不是很有效，也许是ionic3版本？

在我能够拍照之前，现在按钮启动调试chrome＆＃39; Illegal Argument Exception＆＃39;

更新：问题是当电话以USB模式连接时，和   调试模式，SD卡无法保存图片。所以，当你   运行：

离子cordova运行android

您必须关闭调试模式

我无法解决以显示图片，

这里是文件：

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

我找到解决方案，需要使用DomSanitizer，因为需要从另一个区域更新图像，现在问题有时我可以拍照，显示图像，但再做一次，第二次或第三次应用程序关闭而不会出错或者在应用上显示错误'错误'并关闭，

我觉得离子科尔多瓦在真正的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>

Answer 2

我有类似的问题。以下是我的代码。希望它能帮到你

相机应用

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

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

2 个答案: