Ionic Framework: Mengambil Gambar Dari Gallery atau Kamera

2018-01-19 15:45:49

Pada sebuah aplikasi mobile mengambil gambar dari gallery atau kamera merupakan fitur yang umumnya ada. Fitur ini biasanya disematkan pada modul update photo profile user atau modul yang berhubungan dengan upload gambar. Pada tulisan kali ini kita akan membahas bagaimana mengambil gambar dari gallery atau dari kamera.


Persiapan

Untuk dapat mengikuti tutorial ini sebaiknya anda sudah mengikuti kelas tutorial tentang membuat aplikasi Kontak List dengan Ionic dan PHP (Gratis), agar anda mendapatkan basic pengetahuan dari code program yang sudah ada. 

Install Plugin

Untuk mengakses Gallery dan Kamera kita membutuhkan 2 buah plugin dari ionic yaitu Camera, Image Picker. Kemudian untuk mengubah gambar menjadi string base64 kita butuh plugin base64. 

1. Install Plugin Camera

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
2. Install Plugin Image Picker

$ ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message"
$ npm install --save @ionic-native/image-picker
3. Install Plugin Base64

$ ionic cordova plugin add com-badrit-base64
$ npm install --save @ionic-native/base64
Edit file app.module.ts

Selanjutnya kita perlu mendaftarkan plugin-plugin tersebut di bagian provider dalam file app.module.ts dan jangan lupa diimport class-class terkait.


import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { CallNumber } from '@ionic-native/call-number';
import { Camera } from '@ionic-native/camera';
import { ImagePicker } from '@ionic-native/image-picker';
import { Base64 } from '@ionic-native/base64';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ContactService } from '../services/contact.service';
import { HttpModule } from '@angular/http';
import { AddPage } from '../pages/add/add';
import { DetailPage } from '../pages/detail/detail';
import { SearchPage } from '../pages/search/search';
import { EditPage } from '../pages/edit/edit';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AddPage,
    DetailPage,
    SearchPage,
    EditPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AddPage,
    DetailPage,
    SearchPage,
    EditPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    ContactService,
    CallNumber,
    Camera,
    ImagePicker,
    Base64,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Edit file add.ts
Berikutnya kita lakukan perubahan pada file add.ts sebagai berikut 


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, LoadingController, ActionSheetController } from 'ionic-angular';
import { ContactService } from '../../services/contact.service';
import { Contact } from '../../classes/contact.class';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ImagePicker } from '@ionic-native/image-picker';
import { Base64 } from '@ionic-native/base64';
import { DomSanitizer } from '@angular/platform-browser';

@IonicPage()
@Component({
  selector: 'page-add',
  templateUrl: 'add.html',
})
export class AddPage {

  contact: Contact = new Contact();

  constructor(public navCtrl: NavController, 
    public navParams: NavParams, private contactService: ContactService,
    private loadingCtrl: LoadingController, 
    private alertCtrl: AlertController,
    private camera: Camera,
    private imagePicker: ImagePicker,
    private base64: Base64,
    public dom: DomSanitizer,
    private actionSheetCtrl: ActionSheetController) {
  }


  onSave(){
    let loader = this
    .loadingCtrl
    .create({content: "Please wait..."});
    loader.present();
    this.contactService.save(this.contact).subscribe(output=>{
      loader.dismiss();
      this.navCtrl.pop();
      this.msgHandler('Success', 'Contact saved');
    },error=>{
      loader.dismiss();
      this.msgHandler('Error',error);
    })
  }

  presentActionSheet(){
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons:[
        {
          text: 'Choose from Gallery',
          handler: ()=>{
            this.chooseFromGallery();
          }
        },
        {
          text: 'Use Camera',
          handler: () =>{
            this.takePictureWithCamera();
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  chooseFromGallery(){
    const options = {
      width: 200,
      height: 200,
      quality: 80
    }
    this.imagePicker.getPictures(options).then((results)=>{
      var file = results[0];
      this.base64.encodeFile(file).then(base64String=>{
        this.contact.photo = base64String;
      },error=>{
        this.msgHandler('Error',error);
      });
    },error=>{
      this.msgHandler('Error', error);
    });
  }

  takePictureWithCamera(){
    const options : CameraOptions = {
      quality: 80,
      targetHeight: 200,
      targetWidth: 200,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.PNG,
      mediaType: this.camera.MediaType.PICTURE
    }
    this.camera.getPicture(options).then(imageData =>{
      let base64String = 'data:image/png;base64,' + imageData;
      this.contact.photo = base64String;
    },error=>{
      this.msgHandler('Error', error);
    })
  }

  msgHandler(title: string, message: string){
    const alert = this
    .alertCtrl
    .create({title: title, message: message, buttons: ['Ok']});
    alert.present();
  }
}

Pada kode file add.ts yang perlu diperhatikan adalah tambahan 3 fungsi baru yaitu :  presentActionSheet(), chooseFromGallery() dan takePictureWithCamera()

Fungsi presentActionSheet()
Fungsi ini bertugas untuk menampilan Action Sheet yaitu semacam pull up menu, dan akan memanggil fungsi chooseFromGallery atau takePictureWithCamera sesuai dengan menu yang kita pilih. Fungsi ini dipanggil saat kita click/tap pada gambar contact di halaman add contact.

Fungsi chooseFromGallery()
Sesuai dengan namanya fungsi ini berfungsi menampilkan gambar dari gallery, kemudian kita bisa memilihnya. Di dalam fungsi ini terdapat proses mengubah gambar yang dipilih menjadi string base64 yang kemudian di set ke object contact untuk nantinya disimpan ke server.

Fungsi takePictureWithCamera()
Fungsi ini akan membuka camera device anda dan kita bisa take picture. Selanjut gambar tersebut akan diubah menjadi string base64 yang nantinya akan disimpan ke server.

Edit file add.html
Agar gambar yang kita pilih dari gallery atau ambil dengan kamera bisa ditampilkan maka perlu melakukan perubahan pada file add.html sebagai berikut


Pada bagian menampilkan gambar dalam kode di atas, terdapat seleksi. Jika contact belum memiliki photo/gambar maka akan ditampilkan photo/gambar default dan jika contact sudah memiliki photo/gambar maka otomatis akan ditampilkan. Saat menampilkan photo digunakan object dom dengan memanggil fungsi bypassSecurityTrustUrl, ini untuk memastikan photo yang dalam bentuk string base64 bisa ditampilkan. Untuk bisa menggunakan object dom ini, maka kita perlu mendeklarasikannya di class add.ts. Silahkan anda perhatikan di class add.ts kita sudah menambahkan object DomSanitizer di sana.

Edit file home.ts dan home.html
Agar photo/gambar contact juga bisa ditampilkan pada halaman depan (home) maka perlu kita lakukan perubahan di home.html sebagai berikut.



Dan menambahkan deklarasi DomSanitizer di class home.ts sama seperti di class add.ts sebelumnya


//...
  constructor(public navCtrl: NavController, private contactService: ContactService,
    private loadingCtrl: LoadingController, private alertCtrl: AlertController, 
    private callNumber: CallNumber, public dom: DomSanitizer) {

  }
//...

Running Aplikasi
Untuk uji coba aplikasi anda harus menjalankan aplikasi ini menggunakan emulator atau device sebenarnya. Anda tidak dapat mencobanya hanya dengan menjalankannya dibrowser karena aplikasi butuh mengakses gallery dan camera.

$ ionic cordova run android

Ok, jika kode anda sudah benar dan tidak terdapat error apapun harusnya aplikasi anda saat ini sudah dapat digunakan untuk memilih gambar dari gallery atau mengambil gambar menggunakan Kamera. 

Happy Coding :)