ionic-framework Device camera and photo library access from Ionic application For Ionic 3 Example

Example

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

Your app.module.ts will need to inject camera:

import { Camera } from '@ionic-native/camera';
..........
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ...........
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ..........
  ]
})
export class AppModule {}

Camera can be used with Action sheet easily with Ionic 3, Your page.ts will be like below:

import { Camera, CameraOptions } from '@ionic-native/camera';
.........

export class YourPage {

    private base64:any;

constructor(private camera: Camera,private actionsheetCtrl: ActionSheetController) { }


cameragalleryfun(){

    let actionSheet = this.actionsheetCtrl.create({
      title: 'Camera-Gallery',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Camera',
          icon: 'camera',
          handler: () => {
            //console.log('Camera');
            const options: CameraOptions = {
                    quality: 60,
                    destinationType: this.camera.DestinationType.DATA_URL,
                    encodingType: this.camera.EncodingType.JPEG,
                    mediaType: this.camera.MediaType.PICTURE,
                    sourceType : this.camera.PictureSourceType.CAMERA,
                    targetWidth: 500,
                    saveToPhotoAlbum: false,
                    correctOrientation:true
                  }

                     this.camera.getPicture(options).then((imageData) => {
                     this.base64 = 'data:image/jpeg;base64,' + imageData;
                    }, (err) => {
                     // Handle error
                    });
          }
        },
        {
          text: 'Gallery',
          icon: 'images',
          handler: () => {
            //console.log('Gallery');
                const options: CameraOptions = {
                    quality: 60,
                    destinationType: this.camera.DestinationType.DATA_URL,
                    encodingType: this.camera.EncodingType.JPEG,
                    mediaType: this.camera.MediaType.PICTURE,
                    sourceType : this.camera.PictureSourceType.PHOTOLIBRARY,
                    targetWidth: 500,
                    saveToPhotoAlbum: false,
                    correctOrientation:true
                  }

                      this.camera.getPicture(options).then((imageData) => {
                      this.base64 = 'data:image/jpeg;base64,' + imageData;
                    }, (err) => {
                     // Handle error
                    });
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: 'close',
          handler: () => {
            //console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
      
  }
}

Call cameragalleryfun function from any event like click on button, this will return base64 string for image. More option can be applied. for extra option see:https://github.com/apache/cordova-plugin-camera