Ionic相机

在本节中, 我们将看到一个示例, 用于基于Angular访问本机设备摄像头。

要访问或集成本机设备功能, 你需要一个Cordova插件。 Ionic Native充当Cordova插件的包装, 该插件提供与Angular和TypeScript的集成。

Ionic本机相机插件允许我们使用设备相机进行拍照。让我们一步一步地了解如何使用相机在Ionic中拍照。

步骤1：创建一个新项目。你可以从此处了解如何在Ionic 4中创建项目。如果你已经有一个Ionic项目, 则可以跳过此步骤。

步骤2：接下来, 导航到项目并使用以下命令安装以下相机插件。

$ cd myApp
$ ionic cordova plugin add cordova-plugin-camera
$ npm install @ionic-native/camera

步骤3：将相机插件导入app.module.ts文件, 并将插件包括在提供程序中, 如下所示。

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Camera } from '@ionic-native/camera/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

@NgModule({
  declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [
    StatusBar, SplashScreen, Camera, WebView, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ], bootstrap: [AppComponent]
})
export class AppModule {}

步骤4：打开home.page.ts文件并导入照相机插件, 然后使用构造函数创建对象引用。现在, 创建用于捕获照片的功能。以下代码段为你提供了详细说明。

Home.page.ts

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

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {

  capturedSnapURL: string;

  cameraOptions: CameraOptions = {
    quality: 20, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE
  };

  constructor(private camera: Camera) {}

  takeSnap() {
    this.camera.getPicture(this.cameraOptions).then((imageData) => {
      // this.camera.DestinationType.FILE_URI gives file URI saved in local
      // this.camera.DestinationType.DATA_URL gives base64 URI

      const base64Image = 'data:image/jpeg;base64, ' + imageData;
      this.capturedSnapURL = base64Image;
    }, (err) => {

      console.log(err);
      // Handle error
    });
  }
}

步骤5：创建函数后, 打开home.page.html文件。在此文件中, 你需要创建一个按钮并单击event以使用home.page.ts文件中定义的功能。

Home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Camera</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-button (click)="takeSnap()">
      Click Image
    </ion-button>
    <img [src]="capturedSnapURL" />
  </div>
</ion-content>

步骤6：现在, 你需要添加目标平台来部署应用程序。你可以使用手机来运行和测试该应用。为此, 你需要安装以下命令。

$ ionic cordova platform add android
$ ionic cordova run android --aot

如果要在浏览器中测试你的应用程序, 请运行以下命令。

$ ionic cordova run browser

你将获得输出, 单击按钮, 设备摄像头将打开。现在你可以拍照。

相机选项

相机可以使用多个选项。下表列出了这些选项。