Mohan Gopi Mohan Gopi - 3 months ago 15
AngularJS Question

ngcordova camera images in a list from array

I need to push my

base64
string into an empty array so that I can make use of it in $http post.i don' understand when i have made mistake. when i use chome://inspect/#device i get ERROR:-No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin and after photo was taken i get net::ERR_FILE_NOT_FOUND but i can list my photos

HTML

<ion-header-bar class="bar-stable">
<h1 class="title">OB3 SNAPSHOT</h1>
<button class="button button-clear button-large ion-ios-camera" style="align:right" ng-click="takePicture()"></button>
</ion-header-bar>
<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>-->
<ul class="list">
<li class="item" ng-repeat="i in myImage">
<img ng-src="{{baseURL+i}}" ng-click="clickImage()">
</li>
</ul>
</ion-content>


AngularJS

exampleApp.controller("ExampleController", function($scope, $cordovaCamera) {
$scope.myImage = [];
$scope.baseURL = 'data:image/jpeg;base64,';

$scope.clickImage = function() {
var postObject = {
data: {
"width": 32,
"height": 32,
"mimetype": "image/png",
"name": "Image",
"bindaryData": $scope.myImage[0]
}
}

$http.post(" url",
postObject)
.success(function(response) {
$scope.names = response.response.data;
console.log(response);
console.log(response.response.data);
})

.error(function(response) {
console.log(response);
alert('post is error');
});
};


$scope.takePicture = function() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
destinationType: 0
});

function onSuccess(imageData) {
$scope.imgURI = imageData;
$scope.myImage.push($scope.imgURI);
$scope.$apply();
}

function onFail(message) {
alert('Failed because: ' + message);
}

};
});

Answer

Actually the pushing of $scope.imgURI is working perfectly.But your view is not updated.please take two photos.Then you can understand your problem.By adding $scope.$apply() will resolve your issue

Just try this code,

Controller

$scope.myImage = [];
$scope.baseURL = 'data:image/jpeg;base64,';
$scope.takePhoto = function() {
     navigator.camera.getPicture(onSuccess, onFail, {
         quality: 75,
         targetWidth: 320,
         targetHeight: 320,
         destinationType: 0
     });

     function onSuccess(imageData) {
         $scope.imgURI = imageData;
         $scope.myImage.push($scope.imgURI);
         $scope.$apply();
     }

     function onFail(message) {
         alert('Failed because: ' + message);
     }

};

HTML

<button ng-click="takePhoto()">Capture</button>
<li ng-repeat="i in myImage">
    <img ng-src="{{baseURL+i}}">
</li>

Refer

Comments