Ionic 3 Image Picker And Image Resizer

Ionic 3 Image Picker & Image Resize

Used Plugins :

Image Picker Plugins:
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install --save @ionic-native/image-picker


Image Resizer plugin :
ionic cordova plugin add add info.protonet.imageresizer
npm install --save @ionic-native/image-resizer

Create Your Project as: 

 ionic start ProjectName blank
 cd ProjectName 

Create Pages In your Project as :

 ionic g page image-picker

Include new Page in app.module.ts as :

import { ImagePickerPage } from '../pages/image-picker/image-picker';

declarations:[
.....
ImagePickerPage,
],
entryComponents:[
......
ImagePickerPage,
]

Use the below code in any of page example : image-picker.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Image Picker</ion-title>
  </ion-navbar>
</ion-header>


<ion-content [ngStyle]="{
  'background': 'url(' + pickedImage + ') center/cover no-repeat transparent'
}">
<div text-center style="margin:10px;">
      <button ion-button  (click)="openActionSheet()" round>Set Background Image</button>
  </div>
</ion-content>

Paste the below code in .ts file i.e.. example : image-picker.ts file

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

import { ImagePicker } from '@ionic-native/image-picker';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ImageResizer, ImageResizerOptions } from '@ionic-native/image-resizer';

@IonicPage()
@Component({
  selector: 'page-image-picker',
  templateUrl: 'image-picker.html',
  providers: [ImagePicker,ImageResizer]
})
export class ImagePickerPage {
  pickedImage: any;
   loading: any;

  constructor(public navCtrl: NavController,  public imagePic: ImagePicker,
    public actionShetCtrl: ActionSheetController,
    public camera: Camera,
    public loadingCtrl: LoadingController,
    public imageResizer: ImageResizer) {
      this.pickedImage = "assets/imgs/setbg.png";
  }

  openActionSheet() {
    let actionSheet = this.actionShetCtrl.create({
      title: 'Choose Option',
      buttons: [
        {
          text: 'Choose Image from gallery',
          icon: 'photos',
          handler: () => {
            this.pickImage();
          }
        },
        {
          text: 'Open camera',
          icon: 'camera',
          handler: () => {
            this.pickImageCamera();
          }
        },
        {
          text: 'Cancel',
          icon: 'close-circle',
          role: 'cancel'
        }
      ]
    })
    actionSheet.present();
  }

  pickImage() {
    //this.pickedImage="assets/imgs/logo.png";
    this.showLoading();
    let options = {

    }
    this.imagePic.getPictures(options).then((result) => {
      console.log("result : " + result);
      if (result == null || result == '' || result == undefined) {

      }
      else {
        this.pickedImage=result;
        //this.resizeImage(result);
      }
      this.hideLoading();
    }, error => {
      console.log("error : " + error);
      alert("error in pick image" + error);
      this.hideLoading();
    })
  }


  resizeImage(resizeImage : any){
    let options = {
         uri: resizeImage,
         quality: 90,
         width: 400,
         height: 400
      } as ImageResizerOptions;
      this.imageResizer.resize(options).then((filePath) => {
        console.log('FilePath', filePath);
        this.pickedImage=filePath;
      })
  }

  pickImageCamera() {
    this.showLoading();
    let CamOptions: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      saveToPhotoAlbum: true,
      allowEdit: true
    }
    this.camera.getPicture(CamOptions).then((camImage) => {
      console.log("camera image :" + camImage);
      if (camImage == null || camImage == '' || camImage == undefined)   {

      }
      else {
        this.pickedImage = 'data:image/jpeg;base64,' + camImage;
      }
      this.hideLoading();
    }, (error) => {
      console.log("camera error : " + error);
      this.hideLoading();
      alert(error);
    });
  }
  showLoading() {
      this.loading = this.loadingCtrl.create({
        content: 'It take a while please wait..'
      });
      this.loading.present();
    }
    hideLoading() {
      setTimeout(() => {
        this.loading.dismiss();
      }, 2000);
    }
}

Run Your Application: 

 ionic cordova run android