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?
- Use camera to snap pictures
- Store/retrieve the pictures as in array in/from the device through native storage.
- 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.
Add the following code in home.html
- takePicture() we used the native camera to take photo
- 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()
<ion-slide *ngFor=”let image of base64Image”> as base64Image have a list of image, here we are displaying one by one through ngFor loop.
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.
- this.extraOptions we have extra Option property define on ion-slides.
- We are using native storage to store all image URI in photos data as array
- To retrieve store array image from the native we have following code in constructor as
Add style in home.scss
Step 3: At last add the following line of code in app.module.ts