Cordova camera plugin allow user to select one picture at a time. However, we can show all pictures selected by gallery or captured by camera one by one by following code:
view file:
<div ng-controller=MultipleSelEx>
<div class="list card">
<div class="item item-divider" ng-click="oneImage()">Select one picture</div>
<div class="item item-body">
<div ng-repeat="item in image">
<img ng-src="{{item}}" id="myImage" width="50" height="50" />
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider" ng-click="mulImage()">select multiple pictures</div>
<div class="item item-body>
<div ng-repeat="item in images">
<img ng-src="{{item}}" id="myImage" width="50" height="50" />
</div>
</div>
</div>
</div>
JS file:
angular.module(myApp', ['ngCordova'])
.controller('MultipleSelEx', function($scope, $rootScope, $cordovaCamera ) {
$scope.image = [];
$scope.oneImage = function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
targetWidth: 200,
targetHeight: 200
};
$cordovaCamera.getPicture(options).then(function(imageUri) {
$scope.image.push(imageUri);
}, function(err) {
// alert(err);
});
}
})
Although, we have option to select multiple pictures at one time from Gallery, for that we need to first install plugin cordova-imagePicker by following cli command:
cordova plugin add https://github.com/wymsee/cordova-imagePicker.git
and now add below code in controller:
$scope.mulImage = function() {
$scope.images = [];
window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
$scope.images.push(results[i]);
}
if(!$scope.$$phase) {
$scope.$apply();
}
}, function (error) {
console.log(error);
}
);
};
I hope, it will help you..
1 Comment(s)