CODEWITHSUNDEEP
angularjsionic-framework
Mohan Gopi
Mohan Gopi

Reputation: 7724

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);
        }

    };
});

Upvotes: 0

Views: 374

Answers (1)

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

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

Upvotes: 1

Related Questions