Ionic Cordova camera is not working
Question
I am trying to use ionic cordova camera.
I have below code
HomePage.html
<ion-view view-title="Example">
<ion-content>
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}">
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/300x300">
<button class="button" ng-click="takePicture()">Take Picture</button>
</ion-content>
</ion-view>
index.html
<!DOCTYPE html>
<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="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
controllers.js
angular.module('starter.controllers', [])
.controller('HomePageCtrl', function ($scope, $state, $location, $cordovaCamera) {
$scope.data = {};
$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
});
}
})
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('HomePage', {
url: '/HomePage',
templateUrl: 'templates/HomePage.html',
controller: 'HomePageCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
Question:
When i click to button in order to use camera
I get below exception:
Module 'ngCordova' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Where i miss in above side
Any help will be appreciated.
Thanks.
3 answers
solution1
2 ACCPTED 2015-10-12 13:19:21
Taken frome here :
Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js and after your AngularJS / Ionic file (since ngCordova depends on AngularJS).
In short words: ngCordova is missing in your index.html.
solution2
1 2015-12-16 05:11:57
Yes
when you send the Image in to your database the image is came from camera in base64 string.So,That string you automatically send to the your database. Install cordova plugin add org.apache.cordova.camera in you project
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false,
correctOrientation:true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
$scope.Base64string="data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
write this in your controller and base64 string came in $scope.Base64string but when you send this string one problem came that is you have to store this amount of data in the middle **spaces** came so to neglect the one you will write in services
srting Image="data:image/jpeg;base64,/9j/sfgdhbygcecechghchchvfhcghfvhv57egdhbgh.........";
string imagerty = Image.Replace(" ", "+");
Or
in Angularjs
var str = 'data:image/jpeg;base64,/9j/sfgdhbygcecechghchchvfhcghfvhv57egdhbgh.........';
var replaced = str.split(' ').join('+');
solution3
1 2017-04-06 07:56:04
first of all you need to define ngCordova script (beetween ionic.bundle.js script and cordova.js script)
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
also you may need to install whitelist plugin and add meta to index because in some mobile devices it wont work because of centent security policy permission violations
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' https://*/ http://*/ data: gap: content:
'unsafe-eval' 'unsafe-inline';
script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
this will allow you to use pictureSelection too
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.