How to save a picture taken to local storage


#1

Hello guys,

I built a camera function using Ionic 3 native camera plugin.
Now it turns on camera when I click on a button assigned to camera function but I don’t know how to save this using file plugin… any idea?
Is there any guide on how to save a picture taken to local storage?
I found a few tutorials on google but they all seem to be outdated & based on Ionic 2.

As of now, it takes a picture but doesn’t give me an option to save. I thought android will give me this option automatically but it doesn’t.

Thanks, below are my codes.

Here are my imports

import { Camera, CameraOptions } from '@ionic-native/camera';
import { File } from '@ionic-native/file';
import { Transfer, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';

declare var cordova: any;

TS constructor

export class CameraPage {

  image: string;
  cameraImage : string;
  lastImage: string = null;
  loading: Loading;
  public base64Image: string;

  constructor(public navCtrl: NavController,
    private inAppBrowser: InAppBrowser,
    private socialSharing: SocialSharing,
    private sharingVar: SocialSharing,
    private camera: Camera,
    private transfer: Transfer, 
    private file: File, 
    private filePath: FilePath, 
    public actionSheetCtrl: ActionSheetController, 
    public toastCtrl: ToastController, 
    public platform: Platform, 
    public loadingCtrl: LoadingController) {

  }

and camera function

        async pictureFromCamera() {
          const options: CameraOptions = {
            quality: 100,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            correctOrientation: true,
            saveToPhotoAlbum: true
          }
    
          this.takePhoto(options);
          
        }
    
        async takePhoto(options: CameraOptions) {
          try {
            const result = await this.camera.getPicture(options);
    
            this.image = 'data:image/jpeg;base64,${result}'
          }
          catch (e) {
            console.error(e);
          }
        }

#2

add this will probably save your picture in your device.


#3

You’re right. It’s actually saving the photo and this code is working fine.

Thanks for reminding me that.


#4

Take picture and check it in your album.


#5

Right, I was thinking I need another lengthy function from file plugin to make that work… it’s already working.