CODEWITHSUNDEEP
angularjsionic-frameworkcordova-pluginsngcordova
Andrei RRR
Andrei RRR

Reputation: 3162

Ionic / Angular JS - Display Picture after selecting it using ngCordova Camera Plugin

I am developing an App using Ionic / Angular JS. In a specific page I am using ngCordova Camera Plugin to allow users to select a picture from the phone's gallery. Now, I don't know how to display the picture in the page after the app user selects a picture. Here is the HTML code:

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display"> <!-- Display Photo Here --> </div>
</div>

And here is the Controller JS that I am using for the specific tab:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {

    document.addEventListener("deviceready", function () {

      $scope.selectPicture = function() {

        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
            correctOrientation: true
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          var image = document.getElementById('myImage');
          image.src = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
        });
      }

  }, false);

})

Someone can help me?

Upvotes: 2

Views: 480

Answers (3)

S.M.Priya
S.M.Priya

Reputation: 364

You have to add img tag to display the image. Please check with the following,

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display">
      <img  ng-src="{{Viewimg}}" style="width:80%;height:350px;">
  </div>
</div>

controller:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {
    document.addEventListener("deviceready", function () {
      $scope.selectPicture = function() {
        var options = {
          quality: 90,
          destinationType: Camera.DestinationType.DATA_URL,
          sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
            correctOrientation: true
        };

        $cordovaCamera.getPicture(options).then(function(imageData) {
          $scope.Viewimg = "data:image/jpeg;base64," + imageData;
        }, function(err) {
          // error
        });
      }
    }, false);
})

Hope it will helps you!!!

Upvotes: 0

alphapilgrim
alphapilgrim

Reputation: 3975

You could have a placeholder img tag and have a check if it has a source or don't bother taking up space, then set a scoped var to the new image source.

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <div class="photo-display">
    <img ng-src="imageSource" alt="Description" ng-if="imageSource" />
  </div>
</div>

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $cordovaCamera, $log, $ionicLoading, $http, $timeout, $compile) {

  document.addEventListener("deviceready", function() {

    $scope.selectPicture = function() {

      var options = {
        quality: 90,
        destinationType: Camera.DestinationType.DATA_URL,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: false,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        saveToPhotoAlbum: false,
        correctOrientation: true
      };

      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.imageSource = "data:image/jpeg;base64," + imageData;
      }, function(err) {
        // error
      });
    }

  }, false);

})

Upvotes: 0

Michał Jarzyna
Michał Jarzyna

Reputation: 1906

I used cordova (ionic) long time ago, but I suppose you have answer in your code :)

in function '.then' you are fetching image html element 

var image = document.getElementById('myImage');

and injecting real image source uri

 image.src = "data:image/jpeg;base64," + imageData;

So you only need to add to your html code img element with proper id:

<div class="row">
  <div class="select-photo" ng-click="selectPicture()">Select Picture</div>
  <img id="myImage"/>
</div>

Upvotes: 2

Related Questions