Ionic相机 _Ionic相机

在本节中, 我们将看到一个示例, 用于基于Angular访问本机设备摄像头。
【Ionic相机】要访问或集成本机设备功能, 你需要一个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 URIconst 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

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

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

参数	类型	描述
quality Number	It	用于在0-100范围内设置图像质量。
destinationType	Number	用于选择图像的格式。
sourceType	Number	它用于设置图像的来源。
encodingType	Number	用于选择图像的编码类型。值零将设置JPEG, 值一将设置PNG图像格式。
allowEdit	Boolean	它用于允许在选择之前编辑图像。
targetHeight	Number	它用于缩放以像素为单位的图像宽度。
targetWidth	Number	它用于缩放以像素为单位的图像宽度。
cameraDirection	Number	用于将相机设置为正面或背面使用。
popoverOptions	String	仅iOS的选项, 用于指定iPad上的弹出框位置。
mediaType	String	用于设置媒体类型。
correctOrientation	Boolean	它用于在捕获过程中校正设备的方向。
saveToPhotoAlbum	Boolean	它用于将图像保存到设备上的相册中。