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.