分类导航

Cordova 发布时间：2022-05-03 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了cordova – 没有相机供应商！ injectionError，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

我是Ionic 2的初学者.我想在Ionic中使用相机.我按照 https://ionicframework.com/docs/native/camera/教程. 我已经安装了cordova-plugin-camera插件并使用cli代码安装了离子原生/相机. 当我为项目服务时,它显示运行时错误： Uncaught(in promisE):Error: No provider for Camera

我是Ionic 2的初学者.我想在Ionic中使用相机.我按照 https://ionicframework.com/docs/native/camera/教程.
我已经安装了cordova-plugin-camera插件并使用cli代码安装了离子原生/相机.

当我为项目服务时,它显示运行时错误：

我发送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 { httpR_285_11845@odule } 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,httpR_285_11845@odule,IonicModule.forRoot(MyApp)
  ],bootstrap: [IonicApp],entryComponents: [
    MyApp,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
  });

 }


}

解决方法

您需要在app.module.ts中将Camera设置为提供程序

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

 //...

 providers: [
    StatusBar,useClass: IonicErrorHandler},Camera //here
  ]

注意：Cordova插件在离子服务中不起作用..您需要使用模拟器/设备.
另外,在this.platform.ready()中包含你的插件代码,并使用this.platform.is(‘cordova’)检查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
            });
        }
    })
}