参考文档：
Your First Ionic App: Angular
ionic4中调用相机(Camera)
1.创建项目
ionic start camera01 blank
2.打开项目所在文件夹
cd camera01
3.运行项目
ionic serve
正常项目运行如下，项目运行正常再进行下一步
运行
4.添加Android、iOS平台
ionic cordova platform add ios
ionic cordova platform add android添加平台时请耐心等待，如果网络不好会有点慢。
注：
如果添加不成功可以把文件中的node_modules文件夹删除再添加iOS/Android平台。
添加平台成功后，再引入依赖库 cnpm i 或者 npm i
node_modules文件
5.添加 cordova.js
要在DevApp上运行应用，首先需要将cordova.js在index.html文件中添加引用。打开文件，src/index.html并在以下head部分添加以下标记。
添加完成后需要重新运行项目：ionic serve
<head>
<!-- ... Other HTML tags... -->
<script src="cordova.js"></script>
</head>
注：如果出现如下Not Found错误，可以不用理会，因为引入cordova.js是在真机项目APP中使用，在当前网页项目中并没有cordova.js文件。
6.为了使用Camera，我们需要引入它的JavaScript和本机库依赖项。
npm install @ionic-native/camera
或 cnpm install @ionic-native/camera
接下来，运行此命令以添加本机iOS和Android代码，从而有效地允许Camera在移动设备上运行。
ionic cordova plugin add cordova-plugin-camera
官方文档上说，运行上诉代码会在config.xml文件中出现如下代码，但是我试了N次都没有出现，于是手动添加了。我的cordova-plugin-camera版本是4.1.0，如果后续插件更新，请不版本号更新。
<plugin name="cordova-plugin-camera" spec="^4.1.0" />
7.使用camera插件
(1).在路由中添加引用。
如果想整个项目全局引用，可以在App Module (src/app/app.module.ts)中添加引用，可以在想在某个页面单独引用，可以在其路由界面引用，本demo在home.module.ts中引用。
如果出现导入报错，可以重新执行第六步，关闭项目，重新打开，原因是可能某些文件没有下载完全。
app.module.ts同样在providers中添加Camera字段。
import { Camera } from '@ionic-native/camera/ngx';
providers: [Camera]
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
import { Camera } from '@ionic-native/camera/ngx';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage],
providers: [Camera]
})
export class HomePageModule {}
(2).在home.page.ts中添加引用camera方法
import { Component } from '@angular/core';
//引用Camera
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public currentImage: any;
constructor(private camera: Camera) { }
takePicture() {
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) => {
this.currentImage = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
console.log("Camera issue:" + err);
});
}
}
(3).修改src/app/home/home.page.html页面代码。
给页面添加一个按钮，绑定点击事件。
添加一个用于接收图片的img元素
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<img [src]="currentImage" *ngIf="currentImage">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
8.重新 APP build项目
ionic build --prod
平台打包 建议全平台打包，不要在config.xml中声明iOS的权。
ionic cordova prepare 全平台
ionic cordova prepare ios iOS平台
ionic cordova prepare android Android平台
注：
如果是iOS平台需要添加权限声明。
或者自己在xcode中手动声明。
<!-- Required for iOS 10: Camera permission prompt -->
<edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
<string>Used to take pictures</string>
</edit-config>
屏幕快照 2019-09-09 15.21.36.png
9.重新打包
修改代码后运行 ionic build --prod
以及ionic cordova prepare
网友评论