CODEWITHSUNDEEP
angularcordovatypescriptionic2ionic3
runtimeZero
runtimeZero

Reputation: 28086

Capturing images in ionic2 and then storing them locally on phone

I am using a Cordova Plugin Camera to capture user's profile picture. I want to store this in the app.

Here is the code that captures it:

 Camera.getPicture({
      quality : 75,
      destinationType : Camera.DestinationType.DATA_URL,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 300,
      targetHeight: 300,
      saveToPhotoAlbum: false
    }).then(imageData => {
      this.base64Image = "data:image/jpeg;base64," + imageData;

    }, error => {
      console.log("ERROR -> " + JSON.stringify(error));
    });

Once the image is captured, I want to store it locally so that I can display it on the profile page. Any clue how I can do this ?

Upvotes: 0

Views: 3993

Answers (2)

Hung Hoang
Hung Hoang

Reputation: 717

You can use those options: 

Camera.getPicture({
    sourceType: 1, // camera
    destinationType: 1, // file uri
    correctOrientation: true,
    saveToPhotoAlbum: true,
    encodingType: 0, // jpeg
}).then((imageUri) => {
});

Image captured will be automatically saved. Then use imageUri to display image. If you want to read file content, see http://ionicframework.com/docs/v2/native/file/

Upvotes: 0

sebaferreras
sebaferreras

Reputation: 44659

You could use the cordova-plugin-file. I would also change the option

destinationType : Camera.DestinationType.DATA_URL,

for

destinationType: Camera.DestinationType.FILE_URI (android) or

destinationType: Camera.DestinationType.NATIVE_URI (ios)

Because DATA_URL can be very memory intensive and cause app crashes or out of memory errors. You should use FILE_URI or NATIVE_URI if possible.

So the idea is to grab a path to the image on the device. With that, we can move that photo to a folder created for your app (which will be in permanent storage) and then you can use that path to show the photo in the profile page. When I used this Cordova Plugin File it was not part of Ionic Native, so the code is a little bit ugly...

Camera.getPicture(/*...theOptions*/).then(
 (imagePath) => {
     // Create a new file name by using the username or something like that
     let aDate = new Date(),
     aTime = aDate.getTime(),
     userName = this.myCustomUserService.getUserName(),
     newFileName = userName + aTime + ".jpg";

     // Returns a reference to the actual file located at imagePath
     window.resolveLocalFileSystemURL(imagePath,
     (file) => {

         // Returns a reference to the file system
         window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
         (fileSys) => {

             // Gets a reference to your app directory, and if it doesn't exist it creates it
             fileSys.root.getDirectory('yourAppFolderName', {create: true, exclusive: false},
             (directory) => {

                 // Moves the file to that directory, with its new name
                 file.moveTo(directory, newFileName,
                 // The file was succesfully moved and it returns a reference to it. We can use nativeURL to grab the
                 // path to the image on the device
                 (fileEntry) => {
                     this.myCustomUserService.SetProfilePhotoUrl(fileEntry.nativeURL);
                 },

                 // Now we start handing all the errors that could happen
                 (error) => {
                     // The file was unable to be moved
                     // Show error to the user
                     // ...
                 });
             },

             (error) => {
                 // Could not get a reference to your app folder
                 // Show error to the user
                 // ...
             });
         },

         (error) => {
             // Could not get a reference to the file system
             // Show error to the user
             // ...
         });
     });
 },

 (err) => {
      // Could not take picture
      // Show error to the user
      // ...
 });

Upvotes: 1

Related Questions