如何在离子应用程序中启动相机

时间:2018-06-21 09:40:13

标签: android camera ionic3 cordova-plugins offline

我创建了可以启动相机的基本离子应用程序。我安装了所有必需的插件,也使用了正确版本的cordova。我没有任何错误,也能够为此创建apk。在Android手机中的APK中使用相机时,相机不会启动。

这是添加相机模块的home.html代码

 <button ion-button (click)="takePhoto()">camera</button>
<p align="center"><img src="{{ myphoto }}"></p>

这是home.ts文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Database } from '../../providers/database/database';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
tabBarElement: any;
splash = true;
myphoto:any;
public hasTrees    : boolean = false;
public trees      : any;
constructor(public navCtrl: NavController, private camera:Camera,
   public DB : Database) {

this.tabBarElement = document.querySelector('.tabbar');
}

takePhoto(){

const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE

}



this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});

 }

ionViewDidLoad() {
this.tabBarElement.style.display = 'none';
setTimeout(() => {
  this.splash = false;
  this.tabBarElement.style.display = 'flex';
 }, 4000);
 }

 ionViewWillEnter()
 {
  this.displayTrees();
 }

displayTrees()
 {
  this.DB.retrieveTrees().then((data)=>
  {
     let existingData = Object.keys(data).length;
     if(existingData !== 0)
  {
        this.hasTrees  = true;
        this.trees   = data;
     }
  else
   {
  console.log("we get nada!");
  }
  });
  }

 addSpecies()
 {
  this.navCtrl.push('Add');
  }





   viewSpecies(param)
  {
  this.navCtrl.push('Add', param);
  }
  }

0 个答案:

没有答案