首先安装依赖：
1.相机依赖
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
2.相册依赖
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install @ionic-native/image-picker
官网都有现成的依赖，一定注意版本问题！比如你在维护的ionic3版本的项目，但是你本地环境是4以上的，请注意
npm install --save @ionic-native/camera 和 npm install @ionic-native/image-picker 后面都要跟着@环境版本。
比如我在维护3 的项目，但是环境是4 那么
npm install @ionic-native/image-picker@4
npm install --save @ionic-native/camera@4
引用依赖
在app.module.ts中引用以上依赖：
import {Camera} from "@ionic-native/camera";
import { ImagePicker } from '@ionic-native/image-picker';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
Transfer,
File,
Camera,
ImagePicker,
FileTransfer,
HttpProvider
]
})
export class AppModule {}
在所在页面进行使用
1.引用
import { Component } from '@angular/core';
import { NavController, ActionSheetController,Platform} from 'ionic-angular';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { CameraOptions, Camera } from '@ionic-native/camera';
import { ImagePicker,ImagePickerOptions } from '@ionic-native/image-picker';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
path:any = "";
fileTransfer: TransferObject = this.transfer.create();
constructor(public navCtrl: NavController,
private platform: Platform,
private transfer: Transfer,
private camera:Camera,
private imagePicker : ImagePicker,
private actionSheetCtrl: ActionSheetController
) {
}
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
buttons: [{
text: '拍照',
role: 'openCamera',
handler: () => {
this.openCamera();
}
}, {
text: '从相册选择',
role: 'chooseFromAlbum',
handler: () => {
this.getViewByImagePicker();
}
}, {
text: '取消',
role: 'cancel',
handler: () => {
console.log("cancel");
}
}]
});
actionSheet.present().then(value => {
return value;
});
}
//获取相册
getViewByImagePicker(){
//获取权限
// this.imagePicker.hasReadPermission().then(result=>{
// if(!result){
// this.imagePicker.requestReadPermission().then(result=>{
// console.log("读取权限:"+result)
// });
// }
// });
/**
* 调取相册 获取图片
*/
const options : ImagePickerOptions={
maximumImagesCount:9,
outputType : 1
};//只选择9张图片
this.imagePicker.getPictures(options).then((results) => {
this.path = "data:image/jpeg;base64,"+results;
}, (err) => {
});
}
openCamera() {
const options: CameraOptions = {
quality: 90, // 相片质量 0 -100
destinationType: this.camera.DestinationType.DATA_URL, // DATA_URL 是 base64 FILE_URL 是文件路径
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: true, // 是否保存到相册
// sourceType: this.camera.PictureSourceType.CAMERA , //是打开相机拍照还是打开相册选择 PHOTOLIBRARY : 相册选择, CAMERA : 拍照,
}
this.camera.getPicture(options).then((imageData) => {
console.log("成功获取照片"+imageData);
// if(this.isIos()){
// imageData = imageData.replace(/^file:\/\//, '');
// }
//console.log("成功获取照片"+imageData);
this.path = "data:image/jpeg;base64,"+imageData;// imageData;
}, (err) => {
// Handle error
});
}
}
home.ts中获取图片数据，需要注意，在写CameraOptions 时，destinationType 要选用DATA_URL,其他数据无法在html上直接显示。如下（相册同理）
在数据返回时 将数据前缀加上一串：
将得到组织好的数据赋予path
3.html中例子代码：
<ion-header>
<ion-navbar>
<ion-title>编辑</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div padding-top>
<button ion-button block color="light" (click)="presentActionSheet()">选择照片</button>
</div>
<!-- <div padding-top>
<button ion-button (click)="onTest()">上传视频</button>
</div>
<div padding-top>
<button ion-button (click)="onTest()">上传文件</button>
</div> -->
<ion-img [src]="path" style="width: 220px;height:220px"></ion-img>
<div padding-top>
<button type="button" ion-button block>保 存</button>
</div>
</ion-content>
真机测试
1.打包问题
我用的是iphone进行测试，并且Xcode 版本为10以上的请注意：因为暂时ionic不支持10及其以上的打包，所以
ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"
