WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Cordova Camera


The Cordova camera plugin uses the native camera for taking footage or obtaining pictures from the image gallery.

Using Camera

Open your project root folder in electronic communication, then transfer and install the Cordova camera plugin with the subsequent command.

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

Now, we'll produce a service for employing a camera plugin. we'll use the AngularJS industrial plant and promise object $q that must be injected to the industrial plant.

services.js Code

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

To use this service in the app, we need to inject it to a controller as a dependency. Cordova camera API provides the getPicture method, which is used for taking photos using a native camera.

The native camera settings can be additionally customized by passing the options parameter to the takePicture function. Copy the above-mentioned code sample to your controller to trigger this behavior. It will open the camera application and return a success callback function with the image data or error callback function with an error message. We will also need two buttons that will call the functions we are about to create and we need to show the image on the screen.

HTML Code

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

Controller Code

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) {
      var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 1
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

The output will look as shown in the following screenshot.

Ionic Cordova Camera

If you would like to use pictures from your gallery, the sole issue you would like to vary is that the sourceType methodology from your choices parameter. this modification can open a dialog popup rather than camera and permit you to decide on the image you would like from the device.

You can see the subsequent code, wherever the sourceType possibility is modified to zero. Now, after you faucet the second button, it'll open the file menu from the device..

Controller Code

.controller('MyCtrl', function($scope, Camera) {
   $scope.getPicture = function (options) {
	   var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };  
})

The output will look as shown in the following screenshot.

Ionic Cordova Camera Gallery

When you save the image you took, it will appear on the screen. You can style it the way you want.

Ionic Cordova Camera Image

Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com