Question

我想使用ionic 2和cordova插件拍照。

目前，我正在使用http://tphangout.com/using-cordova-camera-plugin-in-your-ionic-2-apps/

中的代码

我使用了离子的典型命令：离子平台添加android;
离子运行android;

我的index.html：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Ionic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">

</head>
<base href="/">

<body>

  <!-- this Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/angular2-polyfills.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

</html>

我的app.ts

import {App, Platform} from 'ionic-angular';
import {HomePage} from './pages/home/home';
import 'es6-shim';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {

  rootPage = HomePage;

  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {


    platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      // Keyboard.setAccessoryBarVisible(false);
      //
      // For example, we might change the StatusBar color. This one below is
      // good for dark backgrounds and light text:
      // StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
    });
  }
}

我的家。：

import {Page, ViewController, Platform, Events, NavController, NavParams} from 'ionic-angular';
import {forwardRef, NgZone} from 'angular2/core';
import {Camera} from 'ionic-native';
import 'es6-shim';
@Page({
  template: ` <img src="{{myPhoto}}" /><br/>
       <button clear small primary (click)="takePhoto()">
        <ion-icon name="camera"></ion-icon> Take photo </button> `
})


export class HomePage {
  private myPhoto: string;
  constructor(
    private _platform: Platform,
    private _nav: NavController,
    private _viewController: ViewController,
    private _zone: NgZone) { }


  takePhoto() {
    var options = {
      sourceType: Camera.PictureSourceType.CAMERA,
      destinationType: Camera.DestinationType.DATA_URL,
      encodingType: Camera.EncodingType.JPEG,
      saveToPhotoAlbum: false, allowEdit: false, quality: 80
    };
    Camera.getPicture(options).then((data) => {
      this._zone.run(() =>
      { this.myPhoto = "data:image/jpeg;base64," + data; });
    }, (err) => { alert(JSON.stringify(err)); });
  }
}

错误

当我运行我的应用程序时，我收到了这张图片：

Ionic 2 App上的白色屏幕

0 个答案: