IONIC + Cordova plugin Camera

Use The Android And iOS Camera With Ionic Framework

The following will help you add camera functionality into your latest creation.

Let’s start by creating a new Ionic project with the Android and iOS platforms:

Remember that you must be using a Mac if you wish to build for iOS.

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

For this tutorial we are going to be using the AngularJS extension set for Apache Cordova called ngCordova.  Start by downloading the latest release of ngCordova and placing the ng-cordova.min.js file in your project’s www/js directory.


Next we need to include this file in our project’s code.  Open the index.html file and include the script before the cordova.js line like below:

This will include the library into our project, but 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:

Now we’re ready for the fun stuff.  Inside your app.js file, we need to add a controller with a method that will launch the camera.  The following was copied almost exactly from the ngCordova documentation:

Notice on line 17, I added a bunch of other data to my scope.  Because our destination type is DATA_URL we will be returning raw camera data rather than a file.  By adding data:image/jpeg;base64 we can use an HTML img tag to display our freshly created snapshot.

Full source code app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of ‘requires’
var exampleApp = angular.module(‘starter’, [‘ionic’, ‘ngCordova’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)

// Don’t remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
if(window.StatusBar) {

exampleApp.controller(“ExampleController”, function($scope, $cordovaCamera) {

$scope.takePicture = 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




Full sourecode index.html

<!DOCTYPE html>
<meta charset=”utf-8″>
<meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>

<link href=”lib/ionic/css/ionic.css” rel=”stylesheet”>
<link href=”css/style.css” rel=”stylesheet”>

<!– IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href=”css/” rel=”stylesheet”>

<!– ionic/angularjs js –>
<script src=”lib/ionic/js/ionic.bundle.js”></script>

<script src=”js/ng-cordova.min.js”></script>

<!– cordova script (this will be a 404 during development) –>
<script src=”cordova.js”></script>

<!– your app’s js –>
<script src=”js/app.js”></script>
<body ng-app=”starter”>

<ion-header-bar class=”bar-stable”>
<h1 class=”title”>Ionic Blank Starter ok</h1>
<ion-content ng-controller=”ExampleController”>
<img ng-show=”imgURI !== undefined” ng-src=”{{imgURI}}”>
<img ng-show=”imgURI === undefined” ng-src=”×300″>
<button class=”button” ng-click=”takePicture()”>Take Picture</button>


Just like that, you can call takePicture() from your UI and initialize the native Android and iOS camera in Ionic Framework.



Tips trim in jquery like in php

The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved.


Remove the white spaces at the start and at the end of the string.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery.trim demo</title>
<script src=""></script>
<pre id="original"></pre>
<pre id="trimmed"></pre>
var str = " lots of spaces before and after ";
$( "#original" ).html( "Original String: '" + str + "'" );
$( "#trimmed" ).html( "$.trim()'ed: '" + $.trim(str) + "'" );


Remove the white spaces at the start and at the end of the string.

$.trim(" hello, how are you? ");


"hello, how are you?"

Hope help you 🙂


Str replace in jquery

Once I was trying to replace a character with another character in client side. I was trying to replace space with dash and started with replace(‘ ‘, ‘-‘) method but I was not accepting the result. It was only working one time, I mean replace() method replaced only first character but not all.

The Problem

Problem is to replace all the related characters with a specific character. Here you will see how to replace space with dash or underscore character.

The Solution

You can use str.replace(/ /g, “-“) or str.split(‘ ‘).join(‘-‘) to achieve this. Let’s see this with a simple example.


Use this simple code to replace space with dash. You can use any of the line to do your job.

        $(document).ready(function () {
            var str = "John Sara Tom";
            alert(str.replace(/ /g, "-"));
            alert(str.split(' ').join('-'));
   // Output is John-Sara-Tom

Hope this helps you.