Saving Memories – Storing the pictures

Here we building an app that can use the native camera to take a picture and store the image on our mobile device.

What are we learning?

  1. Use camera to snap pictures
  2. Store/retrieve the pictures as in array in/from the device through native storage.
  3. Display the pictures in a carousel

Saving Memories app, which allows us to capture pictures using the native camera of the mobile device. The app also displays all the pictures in a carousel.

ionic start NativeCamera blank
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

Step 1:

Add the following code in home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Manage your photos!</ion-title>
    <ion-buttons end (click)="takePicture()" class="custom-icon">
      <button><ion-icon name="camera"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div *ngIf="base64Image.length == 0"> <br/><br/>
    Click on the camera icon to take pictures!
  </div>
  <ion-slides pager autoplay="true" pager="true" options="extraOptions" *ngIf="base64Image.length > 0">
    <ion-slide *ngFor="let image of base64Image">
      <img [src]="image" />
    </ion-slide>
  </ion-slides>
</ion-content>

Note:

  1. takePicture() we used the native camera to take photo
  2. Once a picture is captured, we want to store it. To do this, we can choose to store the list of image URIs (uniform resource identifiers) returned by takePicture(). Since it is list of image declare it as array in constructor as this.base64Image = new Array()
  3. <ion-slide *ngFor=”let image of base64Image”> as base64Image have a list of image, here we are displaying one by one through ngFor loop.

Step 2:
Add the following code in home.ts file, we can store the image URI on local storage but it is unreliable, here we are using native storage, which provides persistence and reliable to store the data, in our case image URI in an array.

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { NativeStorage } from '@ionic-native/native-storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public extraOptions : {};
  public base64Image: string[];
  
  constructor(public navCtrl: NavController, public platform: Platform, private camera: Camera, private nativeStorage: NativeStorage) {
    this.base64Image = new Array();
    this.extraOptions = {
      pager: true,
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2000
    }
    this.platform.ready().then(() => {
      this.nativeStorage.getItem("photos").then(data => {
      this.base64Image = data.split(",");
    },
    error => {
      console.log("error in getting photos "+error);
      });
    })
  }

  takePicture(){
    this.camera.getPicture({
      quality : 75,
      destinationType : this.camera.DestinationType.FILE_URI,
      sourceType : this.camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: this.camera.EncodingType.JPEG,
      targetWidth: 300,
      targetHeight: 300,
      saveToPhotoAlbum: false
    }).then((imageUri) => {
      this.base64Image.push(imageUri);
      let imageUris = this.base64Image.map(o => o).join(', ');
      this.nativeStorage.setItem('photos', imageUris).then(
        () => console.log('Stored item!'),
        error => console.error('Error storing item', error)
      );

      console.log("imageUris is "+imageUris);
    }, (err) => {
      console.log("camera error is"+err);
    });
  }

}

Note:

  1. this.extraOptions we have extra Option property define on ion-slides.
  2. We are using native storage to store all image URI in photos data as array
    this.nativeStorage.setItem('photos', imageUris).then(
            () => console.log('Stored item!'),
            error => console.error('Error storing item', error)
          );
  3. To retrieve store array image from the native we have following code in constructor as
    constructor(public navCtrl: NavController, public platform: Platform, private camera: Camera, private nativeStorage: NativeStorage) {
    ......
        this.platform.ready().then(() => {
          this.nativeStorage.getItem("photos").then(data => {
          this.base64Image = data.split(",");
        },
        error => {
          console.log("error in getting photos "+error);
          });
        })
      }

Add style in home.scss

.custom-icon {
    font-size: 32px;
    color : blue;
}

Step 3: At last add the following line of code in app.module.ts

import { Camera } from '@ionic-native/camera';
import { NativeStorage } from '@ionic-native/native-storage';

@NgModule({

  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    NativeStorage,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}