本文為原創(chuàng)文章，轉(zhuǎn)載請標(biāo)明出處

目錄

1. 安裝插件
2. 導(dǎo)入 app.module.ts
3. 創(chuàng)建 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. 導(dǎo)入 app.module.ts

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

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

3. 創(chuàng)建 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

如有不當(dāng)之處，請予指正，謝謝～