Ionic 摄像头

2025年3月17日 | 阅读 3 分钟

在本节中，我们将看到一个基于 Angular 访问原生设备相机的示例。

要访问或集成原生设备功能，您需要一个 Cordova 插件。 Ionic Native 充当 Cordova 插件的包装器，提供与 Angular 和 TypeScript 的集成。

Ionic Native 相机插件允许我们使用设备相机拍照。让我们一步一步地学习如何在 Ionic 中访问相机来拍照。

步骤 1： 创建一个新项目。您可以从这里学习如何在 Ionic 4 中创建项目。如果您已经有一个 Ionic 项目，可以跳过此步骤。

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

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

步骤 3： 在 app.module.ts 文件中导入相机插件，并将插件包含在 providers 中，如下所示。

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 文件。在此文件中，您需要创建一个 button 和 click 事件 来使用在 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： 现在，您需要添加目标 platform 来部署应用程序。您可以使用手机来运行和测试应用程序。为此，您需要安装以下命令。

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

如果您想在 浏览器 中测试您的应用程序，请运行以下命令。

您将获得输出，单击该按钮，设备相机将打开。现在您可以拍照或截图。

相机选项

可以使用相机的几个选项。这些选项在下表中给出。

参数	类型	描述
质量数值	它	用于设置图像质量，范围为 0-100。
destinationType	数字	用于选择图像的格式。
sourceType	数字	用于设置图像的来源。
encodingType	数字	用于选择图像的编码类型。值 0 将设置为 JPEG，值 1 将设置 PNG 图像格式。
allowEdit	Boolean	用于在选择之前允许编辑图像。
targetHeight	数字	用于缩放图像的像素宽度。
targetWidth	数字	用于缩放图像的像素宽度。
cameraDirection	数字	用于设置相机使用前置或后置摄像头。
popoverOptions	String	仅限 iOS 选项，用于指定 iPad 上的弹出窗口位置。
mediaType	String	用于设置媒体类型。
correctOrientation	Boolean	用于在捕获期间校正设备的方向。
saveToPhotoAlbum	Boolean	用于将图像保存到设备上的相册中。