Я новичок в Ionic 2. Я хотел бы использовать камеру в Ionic. Я следовал https://ionicframework.com/docs/native/camera/ учебнику. Я уже установил плагин cordova-plugin-camera и установил ionic-native / camera с помощью кода Cli.

Пока я обслуживаю проект, он показывает Runtime Error:

Uncaught (в обещании): Ошибка: нет поставщика для камеры! injectionError

Я отправляю app.module.ts, html-страницу и страницу типа сценария. Пожалуйста, посмотрите.

< Сильный > app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { CameraExamplePage } from "../pages/camara-example/camara-example";

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    CameraExamplePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    CameraExamplePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

HTML-страница с камерой

<ion-header>


  <ion-navbar>

   <ion-title>camaraExample</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

   <button ion-button color="dark" (click)="takePhoto()" > Take Photo 
   </button>
   <img [src]="imageURL" *ngIf="imageURL">

 </ion-content>

** Файл TypeScript **

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera'

@IonicPage()
 @Component({
             selector: 'page-camara-example',
             templateUrl: 'camara-example.html',
            })
 export class CameraExamplePage {
 imageURL

 constructor(public navCtrl: NavController, public navParams: NavParams, public camera: Camera) {
 }
 ionViewDidLoad() {
    console.log('ionViewDidLoad CameraExamplePage');
 }

  takePhoto()
  {
    const options: CameraOptions = {
    quality: 100,
    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:
  //let base64Image = 'data:image/jpeg;base64,' + imageData;

  this.imageURL = imageData


  }, (err) => {
  // Handle error
  });

 }


}
10
Jit 5 Сен 2017 в 10:07

4 ответа

Лучший ответ

Вам необходимо установить камеру в качестве поставщика в app.module.ts .

 import { Camera } from '@ionic-native/camera';//import in app.module.ts

 //...

 providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Camera //here
  ]

Пока я обслуживаю проект, он показывает Runtime Error

ПРИМЕЧАНИЕ: плагины Cordova не работают в ионном режиме. Вам необходимо использовать эмулятор / устройство. Кроме того, включите ваш код плагина в this.platform.ready() и проверьте, доступен ли cordova с помощью this.platform.is('cordova')

import { Platform } from 'ionic-angular'; //import Platform
//...
constructor(public platform:Platform){}
//...
takePhoto() {
    this.platform.ready().then(() => {
        if(this.platform.is('cordova')){
            this.camera.getPicture(this.options).then((imageData) => {
                // imageData is either a base64 encoded string or a file URI
                // If it's base64 (DATA_URL):
                let base64Image = 'data:image/jpeg;base64,' + imageData;
            }, (err) => {
                // Handle error
            });
        }
    })
}
27
Shane McCurdy 18 Янв 2019 в 04:05

Сначала нужно установить плагины камеры с помощью двух команд

$ ionic cordova plugin add cordova-plugin-camera

$ npm install --save @ ionic-native / camera

После этого в своем app.module.ts вам нужно import это plugins и изменить provider

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { CamaraExampalePage } from "../pages/camara-exampale/camara-exampale";
import { Camera} from '@ionic-native/camera';
@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    CamaraExampalePage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    CamaraExampalePage
  ],
  providers: [
    Camera,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
6
Elia Weiss 27 Окт 2019 в 18:44

Просто установите Camera в качестве поставщика в app.module.ts и импортируйте его в свой компонент ... работает как по волшебству!

-1
Kelvyn7 Kay 25 Апр 2019 в 14:21

Проблема с автоматически сгенерированным оператором import. Вам нужно: `import {Camera, CameraOptions} из '@ ionic-native / camera / ngx';

1
alex87 2 Сен 2019 в 06:11