Hello,
If you want to integrate camera in ionic application, following are the command for that-
In your index.html file:-
Because of following reasons:-
In the app.js file add the following line:-
in the controller.js file we will add the following lines of code .Here this code also restrict an user to take only five pics.
Thanks ...
If you want to integrate camera in ionic application, following are the command for that-
ionic start CameraApp blank
cd CameraApp
ionic platform add android
bower install ngCordova
Cordova plugin add https://github.com/apache/cordova-plugin-whitelist.gitcordova plugin add org.apache.cordova.camera
In your index.html file:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers/CameraCtrl.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar bar-header bar-calm">
<h1 class="title">Camera pic branch ....</h1>
</ion-header-bar>
<ion-content ng-controller="CameraCtrl">
<button class="button button-full button-positive" ng-click="limitPicture()">Take Picture</button>
<div class="row" ng-repeat="image in images">
<img ng-src="{{image}}">
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here we including the following line of code in head section
<meta http-equiv="Content-Security-Policy" content="default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Because of following reasons:-
Whitelist functionality is revamped
- You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist
- Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist.
- Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.
- This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin.
- Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.
In the app.js file add the following line:-
angular.module('starter', ['ionic', 'ngCordova'])
in the controller.js file we will add the following lines of code .Here this code also restrict an user to take only five pics.
.controller("CameraCtrl", function($scope, $cordovaCamera) {
$scope.images = [];
$scope.limitPicture = function(){
if($scope.images.length<5){
$scope.takePicture();
}
else{
alert("limit exceed");
}
}
$scope.takePicture = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 200,
targetHeight: 200,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var imgURI = "data:image/jpeg;base64," + imageData;
$scope.images.push(imgURI);
}, function(err) {
// An error occured. Show a message to the user
});
console.log("length",$scope.images.length);
}
});
Thanks ...
No comments:
Post a Comment