Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

目录

app.module.ts

1. 安装插件

ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
npm install --save @ionic-native/image-picker

2. 导入

app.module.ts

...
import {Camera} from "@ionic-native/camera";
import {ImagePicker} from "@ionic-native/image-picker";
...

@NgModule({
...
providers: [
...
Camera,
ImagePicker,
...
]
...
})
...

3. 创建 provider

ionic g page edit

edit.html

<ion-header>

<ion-navbar>
<ion-title>编辑</ion-title>

<ion-buttons end>
<button ion-button>保存</button>
</ion-buttons>
</ion-navbar>

</ion-header>

<ion-content>
<div class="header-image" tappable [ngStyle]="{'background-image': 'url('+avatar+')'}" (click)="presentActionSheet()"></div>
</ion-content>

edit.scss

page-edit {
.header-image {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-size: cover;
}
}

edit.ts

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, ActionSheetController, AlertController} from 'ionic-angular';

import {ImagePicker, ImagePickerOptions} from "@ionic-native/image-picker";
import {Camera, CameraOptions} from "@ionic-native/camera";

@IonicPage()
@Component({
selector: 'page-edit',
templateUrl: 'edit.html',
})
export class EditPage {

avatar: string = "";

constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public alertCtrl: AlertController, public imagePicker: ImagePicker, public camera: Camera) {
}

presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
buttons: [{
text: '拍照',
role: 'takePhoto',
handler: () => {
this.takePhoto();
}
}, {
text: '从相册选择',
role: 'chooseFromAlbum',
handler: () => {
this.chooseFromAlbum();
}
}, {
text: '取消',
role: 'cancel',
handler: () => {
console.log("cancel");
}
}]
});

actionSheet.present().then(value => {
return value;
});
}
takePhoto() {
const options: CameraOptions = {
quality: 100,
allowEdit: true,
targetWidth: 200,
targetHeight: 200,
saveToPhotoAlbum: true,
};

this.camera.getPicture(options).then(image => {
console.log('Image URI: ' + image);
this.avatar = image.slice(7);
}, error => {
console.log('Error: ' + error);
});
}

chooseFromAlbum() {
const options: ImagePickerOptions = {
maximumImagesCount: 1,
width: 200,
height: 200
};
this.imagePicker.getPictures(options).then(images => {
if (images.length > 1) {
this.presentAlert();
} else if (images.length === 1) {
console.log('Image URI: ' + images[0]);
this.avatar = images[0].slice(7);
}
}, error => {
console.log('Error: ' + error);
});
}

presentAlert() {
let alert = this.alertCtrl.create({title: "上传失败", message: "只能选择一张图片作为头像哦", buttons: ["确定"]});
alert.present().then(value => {
return value;
});
}

}

4. 更多

5. 效果图