Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact

Cordova camera plugin example using ionic framework

August 13, 2015 By Source Freeze 32 Comments


In the previous tutorial we have learned about the getting started with ionic framework. now we are going to learn about how to access the device camera and photo library using cordova camera plugin and ionic framework. This sample will work android and iOS Devices.

Next create ionic framework sample using the below command, here we are creating ionic blank template project and name it  as”CameraPluginDemo”.

ionic framework blank project
Shell
2
3
4
ionic start CameraPluginDemo blank
 
cd CameraPluginDemo

Then add the android and iOS platforms using the below ionic commands.

Adding the platform for iOS and Android
Shell
2
3
4
ionic platform add android
 
ionic platform add ios

Note:

Remember you must have mac to build ios applications.

Next in this application we are integrating ngCordova library, if you are new to ngCordova framework here is simple description.

What is ng-Cordova?

“ngCordova is a collection of AngularJS services and extensions created by Ionic and driven by the community. These services make it easier to integrate Cordova plugins into Ionic applications”

Then, start downloading the latest ngcordvao library and place the ng-cordova.min.js file in your project’s www/js directory.

Add the ng-cordova.min.js reference above to the cordova.js file in the index.html as mentioned in the below.

Adding ngcordova.min.js file reference
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

ng-cordova integration is still not over, now we need to include it for use in AngularJS.  Open your app.js file and alter the angular.module line to look like the following.

app.js
1
angular.module('starter', ['ionic', 'ngCordova'])

Adding Cordova Camera Plugin

The next thing we want to do is add the Apache Cordova camera plugin. This can be done by running the following command.

Adding Cordova Camera Plugin
Shell
1
cordova plugin add org.apache.cordova.camera

Now we are configured the application with cordova camera plugin.

Next have to add the buttons for take and choose picture in the ion-content tag. Once added button tag add the button click event using ng-click attribute and add ng-controller attribute in ion-content as mentioned in the below.

Adding UI for take and choose picture
XHTML
1
2
3
4
5
6
7
8
9
10
11
<ion-header-bar class="bar-assertive">
<h1 class="title">Photos</h1>
</ion-header-bar>
<ion-content ng-controller="ExampleController" padding="true">
<button class="button button-full button-assertive" ng-click="takePhoto()">
Take Photo
</button>
<button class="button button-full button-assertive" ng-click="choosePhoto()">
Choose Photo
</button>
</ion-content>

Then add the img tag here we have initially hided image by checking src attribute using ng-show and set the value ng-src as imgURI. This imgURI value will be set while choosing or taking picture function.

Adding image tag attribute.
XHTML
1
2
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
</ion-content>

then creating a controller in js file and add the function for take and choose picture, getPicture function used to take and choose photo by sending the options. we can set quality, destinationType, sourceType, etc. using option values. here is full source code for app.js functions.

app.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
angular.module('starter', ['ionic', 'ngCordova'])
 
.controller("ExampleController", function ($scope, $cordovaCamera) {
 
                $scope.takePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
  
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }
                
                $scope.choosePhoto = function () {
                  var options = {
                    quality: 75,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                    allowEdit: true,
                    encodingType: Camera.EncodingType.JPEG,
                    targetWidth: 300,
                    targetHeight: 300,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
  
                    $cordovaCamera.getPicture(options).then(function (imageData) {
                        $scope.imgURI = "data:image/jpeg;base64," + imageData;
                    }, function (err) {
                        // An error occured. Show a message to the user
                    });
                }
            });

next we have to run the application using the below command lines. if you are running in emulator you can use emulate instead run.

Running ionic applications
Shell
1
2
3
ionic run ios
 
ionic run android

once run the application choose or take picture using specific feature, the output will looks like below and find the full source code of this example using our Github location.     

 ionic camera plugin example in device

          

Related Post

Best Mobile UI Frameworks using HTML5, CSS and JS
ionic side menu example
visual studio cordova plugins for cross-platform m...
ionic framework and cordova or phonegap – g...
Multi-Device Hybrid apps using visual studio Cordo...

Filed Under: cordova, cross-platform, ionic framework, phonegap

Sign Up Free Tutorials

Follow @sourcefreeze

Share it!!

  • Facebook
  • Google+
  • Twitter
  • YouTube

Recent Posts

  • Ionic 2 getting started
  • Best Mobile UI Frameworks using HTML5, CSS and JS
  • MBProgressHUD example in Swift
  • UIActivityindicatorview example in ios using swift
  • ionic side menu example
  • Cordova InAppBrowser Plugin Example using ionic framework

Find us on Google Plus

TAGS

cross-platform ionic iOS mobile application development objective-c swift uiwebview Visual Studio plugin

Categories

  • cordova
  • cross-platform
  • Hybrid
  • Ionic 2
  • ionic framework
  • ios-tutorial
  • Mobile App Development
  • phonegap
  • swift
  • UIAlertController
  • uidatepicker
  • uipickerview
  • uislider
  • UISwitch
  • uitableview
  • uitextfield
  • uiwebview
  • visual studio – plugin

Recent Posts

  • Ionic 2 getting started
  • Best Mobile UI Frameworks using HTML5, CSS and JS
  • MBProgressHUD example in Swift
  • UIActivityindicatorview example in ios using swift
  • ionic side menu example
  • Cordova InAppBrowser Plugin Example using ionic framework

Recent Comments

  • Pra Kash on UIWebView example using swift in ios
  • [已解决]swift实现点击按钮出现下拉菜单 – 在路上 on iOS UIPickerView Example using Swift
  • create a UIWebView and load a website programmically - QuestionFocus on UIWebView example (iOS webview) using objective c
  • Homepage on UITableView tutorial using Swift in iOS
  • How to link a boolean value to the on/off state of a UISwitch? - ExceptionsHub on UISwitch Tutorial using swift in iOS8
  • Swift: Display HTML data in a label or textView - ExceptionsHub on UIWebView example using swift in ios

Tags

cross-platform ionic iOS mobile application development objective-c swift uiwebview Visual Studio plugin
Follow @sourcefreeze

Copyright © 2018 SourceFreeze