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

本文为原创文章，转载请标明出处

目录

1. 安装插件
2. 导入 app.module.ts
3. 创建 provider
4. 更多
5. 效果图

1. 安装插件

终端运行:

ionic cordova plugin add cordova-plugin-cameranpm install --save @ionic-native/cameraionic 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. 更多

Ionic Native - Camera
GitHub - cordova-plugin-camera
Ionic Native - Image Picker
GitHub - ImagePicker

5. 效果图

iOS:

Android:

如有不当之处，请予指正，谢谢～