IONIC3 Study Notes (12) Take photos upload pictures and choose pictures from albums upload

This article is original article, reprint please indicate the source

Catalogue

1. Installing plugins
2. Importapp.module.ts
3. Create Provider
4. More

1. Installing Plugins

Terminal operation:

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. Import app.module.ts

...import {Camera} from "@ionic-native/camera";import {ImagePicker} from "@ionic-native/image-picker";...@NgModule({  ...  providers: [    ...    Camera,    ImagePicker,    ...  ]  ...})...

3. Create provider

Terminal operation:

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: ' Photographed ', role: ' Takephoto ', hand        Ler: () = {This.takephoto (); }}, {text: ' Select from album ', Role: ' Choosefromalbum ', handler: () = {This.choosefromalbum        (); }}, {text: ' Cancel ', 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: "Upload Failed", message: "Only one picture can be selected as Avatar Oh", buttons: ["OK"]});    Alert.present (). then (value = = {return value;  }); }}

4. More

Ionic Native-camera
Github-cordova-plugin-camera
Ionic Native-image Picker
Github-imagepicker

5.

Ios:

Android:

If there is any improper, please correct, thank you ~

IONIC3 Study Notes (12) Take photos upload pictures and choose pictures from albums upload