Display a Picture take with Camera on another page

ionic-v1
1

Hi everyone,
I need your help because I search the solution but I don’t find it.

So this is my problem, I use the plugin Cordova Camera API on my app and it’s work great, I can open the camera, take a picture or select it from the gallery.

But I wanna display the image captured on a second page and not on the same page.

I don’t know how I can do that.

So I have on my app.js this:

 // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


.controller('HomeCtrl', function($ionicHistory){
  $ionicHistory.nextViewOptions({disableBack: true})
}
)
.controller('InsCtrl', function($ionicHistory){
  $ionicHistory.nextViewOptions({disableBack: true})
}
)
.controller('ConCtrl', function($ionicHistory){
  $ionicHistory.nextViewOptions({disableBack: true})
}
)
.controller('AppCtrl', function($scope, $cordovaCamera, $ionicHistory){
  $scope.takePhoto = 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: true
  };

  $cordovaCamera.getPicture(options).then(function(imageData) {
          $scope.$apply(function () {
              $scope.imgURI = "data:image/jpeg;base64," + imageData;
          });
      }, function(err) {
          // An error occured. Show a message to the user
      });
}

$scope.choosePhoto = function () {
  var options = {
    quality: 75,
    destinationType: Camera.DestinationType.DATA_URL,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    allowEdit: true,
    encodingType: Camera.EncodingType.JPEG,
    targetWidth: 300,
    targetHeight: 300,
    popoverOptions: CameraPopoverOptions,
    saveToPhotoAlbum: false
};

$cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.$apply(function () {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        });
    }, function(err) {
        // An error occured. Show a message to the user
    });
}

  $ionicHistory.nextViewOptions({disableBack: true})

})

.config(function($stateProvider, $urlRouterProvider, $compileProvider) {

  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

$stateProvider.state('home',{
  url:'/home',
  templateUrl: 'templates/home.html',
 controller: 'HomeCtrl',
});


$stateProvider.state('connexion',{
  url:'/connexion',
  templateUrl: 'templates/connexion.html',
  controller: 'ConCtrl',
})

$stateProvider.state('inscription',{
  url:'/inscription',
  templateUrl: 'templates/inscription.html',
  controller: 'InsCtrl',
})

$stateProvider.state('homemodule',{
  url:'/homemodule',
  templateUrl: 'templates/module.html',
  controller: 'AppCtrl'
})

$stateProvider.state('extension',{
  url:'/extension',
  templateUrl: 'templates/addext.html',
})

$urlRouterProvider.otherwise('/home')
});

In my page to take a photo or choose in the gallery:

<ion-view view-title="Mon extension facile">
  <ion-content>
    <div id="logo">
    <img src="img/logo.png" class="logo"></img>
  </div>
    <div id="titre"><h2>Choisissez votre option</h2>
    </div>
    <div id="photo">
      <button ng-click="takePhoto()" ui-sref="extension" class="photo"></button>
    <!--img class="photo" src="img/photo.png"></img-->
    <div class="txtphoto">
      <h4>Prendre une photo</h4>
    </div>
    </div>
    <div id="galerie">
    <button ng-click="choosePhoto()" ui-sref="extension" class="galerie"></button>
    <div class="txtgalerie">
      <h4>Choisir une photo</h4>
    </div>
    </div>
  </ion-content>
</ion-view>

And in my page to display the picture this:

<ion-view view-title="Extension">
  <ion-content ng-controller="AppCtrl">
    <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
  </ion-content>
</ion-view>

And the image captured don’t display to my second page.
So thanks to tell me how i can do that.

2

No body know how I can do that ?

3

Ok i find the solution. I remplace the Camera.DestinationType.DATA_URL to Camera.DestinationType.DATA_URI
and this code

cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.$apply(function () {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
        });
    }, function(err) {
        // An error occured. Show a message to the user
    });
}

to

$cordovaCamera.getPicture(options).then(function(imageURI) {
      var image = document.getElementById('myImage');
      image.src = imageURI;
    }, function(err) {
      // error
    });

And its work.

3 Likes
4

Can you please share your complete code , I have similar requirement as yours but I am unable to to get it working.

5

I am getting similar problem. Image is not displaying on another page. I follow you code still not getting image on another page. Please help me out.

This is Index.html file

<link rel="manifest" href="manifest.json">

<!-- un-comment this code to enable service worker
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js')
      .then(() => console.log('service worker installed'))
      .catch(err => console.log('Error', err));
  }
</script>-->

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>

<ion-pane>




<ion-nav-bar class="bar-light">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>


<script id="templates/intro.html" type="text/ng-template"> 
  <ion-view view-title="Intro">
    <ion-nav-buttons side="left">
      <button class="button button-positive button-clear no-animation"
              ng-click="startApp()" ng-show="!slideIndex">
        Skip Intro
      </button>
      <button class="button button-positive button-clear no-animation"
              ng-click="previous()" ng-show="slideIndex > 0">
        Previous Slide
      </button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right"> 
      <button class="button button-positive button-clear no-animation"
              ng-click="next()" ng-show="slideIndex != 2">
        Next
      </button>
      <button class="button button-positive button-clear no-animation"
              ng-click="startApp()" ng-show="slideIndex == 2">
        Start using MyApp
      </button>
    </ion-nav-buttons>
    <ion-slide-box on-slide-changed="slideChanged(index)">
      <ion-slide>
        <h3>Thank you for choosing the Awesome App!</h3>
        <div id="logo">
         <img src="http://code.ionicframework.com/assets/img/app_icon.png"> 
        </div>
        <p>
          We've worked super hard to make you happy.
        </p>
        <p>
          But if you are angry, too bad.
        </p>
      </ion-slide>
      <ion-slide>
        <h3>Using Awesome</h3>
        
        <div id="list">
          <h5>Just three steps:</h5>
          <ol>
            <li>Be awesome</li>
            <li>Stay awesome</li>
            <li>There is no step 3</li>
          </ol>
        </div>
      </ion-slide>
      <ion-slide>
        <h3>Any questions?</h3>
        <p>
          Too bad!
        </p>
      </ion-slide>
    </ion-slide-box>
  </ion-view>
</script>





<script id="templates/main.html" type="text/ng-template">
  <ion-view hide-back-button="true" view-title="Awesome">
 <!--  <ion-content ng-controller="MainCtrl" padding="true">  -->
   <ion-content padding="true"> 
      <h1> Main app here </h1>
Take Photo Choose Photo 
      <button class="button" ng-click="toIntro()">Do Tutorial Again</button>
    </ion-content>
  </ion-view>
</script>

</ion-pane>

This is app.js file

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// ‘starter’ is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires’
angular.module(‘printIO’, [‘ionic’,‘ngCordova’])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}

});
})
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

$stateProvider
.state(‘intro’, {
url: ‘/’,
templateUrl: ‘templates/intro.html’,
controller: ‘IntroCtrl’
})
.state(‘main’, {
url: ‘/main’,
templateUrl: ‘templates/main.html’,
controller: ‘MainCtrl’
})
.state(‘img’, {
url: ‘/img’,
templateUrl: ‘templates/img.html’,

});
$urlRouterProvider.otherwise("/");

})

.controller(‘IntroCtrl’, function($scope, $state, $ionicSlideBoxDelegate) {

// Called to navigate to the main app
$scope.startApp = function() {
$state.go(‘main’);
};
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};

// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})

/*.controller(‘MainCtrl’, function($scope, $state) {
console.log(‘MainCtrl’);

$scope.toIntro = function(){
$state.go(‘intro’);
}
}); */

.controller(‘MainCtrl’, function($scope, $state, $cordovaCamera) {

$scope.takePhoto = function () {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URI,
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
                });
            } */
			$cordovaCamera.getPicture(options).then(function(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}, function(err) {
  // error
});

}

            $scope.choosePhoto = function () {
              var options = {
                quality: 75,
                destinationType: Camera.DestinationType.DATA_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
                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
                });
            } */
			$cordovaCamera.getPicture(options).then(function(imageURI) {
  var image = document.getElementById('myImage');
  image.src = imageURI;
}, function(err) {
  // error
});

}
$scope.toIntro = function(){
$state.go(‘intro’);
}
});