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

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

目录

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

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. 创建 page

终端运行:

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:

iOS

Android:

Android

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