Cordova camera plugin in ionic

Cordova camera in  ionic

Camera plugin used for taking a picture and open the internal or external images from the system library. Camera plugin will lead to taking a picture from getPictures() function.  In KitKat and Lollipop os, it automatically allows access for the camera plugin. After the Android 5.0(marshmallow, nougat), Allow access given by the user.

How to generate camera plugin ionic

Install ionic

first of all, install ionic, ionic is an open source hybrid framework and it will use to get the experience of camera plugin. 

  

                                    npm install -g cordova ionic

create Ionic Project

create a new ionic project and install the camera plugin and get the experience of camera plugin

                                 ionic start myapp blank --type ionic1

How to use the camera plugin

open a new HTML page, use the img tag to show the images to use on the page. The image must be the snapshot or internal library image.

     <div>
           <img src="filePath" style="width:300px;height:300px">
    </div>
    <button ng-click=camerause()></button>

Then install the ngcordova for using the camera plugin. ones the cordova install the add the ngcordova in app.js and add the script to the index page. If the ngcordova add, then install camera plugin in the command prompt. As already sais the camera plugin to taking pictures or retrieving normal pictures from phone external library.

In index.html, automatically add the camera plugin permission or otherwise add the script line given on the official page.

To Install the camera Plugin

This command installs all the package of camera plugin in the project. to check the camera plugin installation just check in plugins folder in the ionic project.

   cordova Plugin add cordova-camera-plugin

To Check plugin list, type the command of ionic plugin list. This will tell about plugin install in the project, already set to check in the plugins folder.

How to use the camera plugin

Now the camera plugin installed successfully, then open the controller.js page and use camera plugin.

In the controller.js file, add $cordovaCamera to access camera plugin the page and experienced the camera app. 

Options for the camera plugin

Quality

Quality must be used to give picture quality for an image. The range of pictures quality is (1 to 100). if the quality is not set it will default value of 50.

DestinationType

In-camera plugin, the destination type to store the image in the internal library. The default library for destinationtype is FILE_URI. It will store the image in install package of the app(android folder). Then image store as base-64 encoding. It will mainly use to transfer the image to server side and store the images as encoding format.

sourceType

The default type to open the camera. If the source type is store as Photolibrary then it will open the photo album or gallery in the phone

allowEdit

allowEdit use to crop the image and store in the app or to send the image to the server side.

encodingType

The default encoding format is Jpeg format. It must store as JPEG or PNG images.

App.js

If button clicks, it will redirect to camera plugin, through source type it will open the camera or photo album of an external library.

angular.module('home.ctrl', [])
 .controller('homeCtrl', ['$scope','$cordovaCamera',function($scope,$cordovaCamera) {
       $scope camerause=function(){
         var options = {
              quality: 50,
              destinationType: Camera.DestinationType.FILE_URI,
              sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
              allowEdit: true,
              encodingType: Camera.EncodingType.JPEG,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
          };

          $cordovaCamera.getPicture(options).then(function(imageData) {
              var filePath = imageData;
              var fileName = imageData.substr(imageData.lastIndexOf('/') + 1);
          });
      }
}])