angularjs - retrieve previous photo taken with camera with ionic framework -
it's first app ionic
i'm trying take photo in camera tab , retrieve photo in filters tab, cant, here code
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- if using sass (run gulp sass first), uncomment below , remove css includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this 404 during development) --> <script src="js/ng-cordova.min.js"></script> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-balanced"> <h1 class="title vcrfont">dstry_cam</h1> </ion-header-bar> <ion-tabs class="tabs-balanced tabs-icon-top"> <ion-tab title="wtf?" icon-on="ion-ios-help" icon-off="ion-ios-help-outline"> <ion-pane> <div id="welcome"> <h2>welcome to<br>dstry_cam</h2> <h3>instructions:</h3> <h3>1.shoot</h3> <h3>2.destroy</h3> <h3>3.share</h3> </div> </ion-pane> </ion-tab> <ion-tab title="camera" icon-on="ion-ios-camera" icon-off="ion-ios-camera-outline"> <ion-pane ng-controller="examplecontroller" class="centrar"> <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> </ion-pane> </ion-tab> <ion-tab title="filters" icon-on="ion-ios-flask" icon-off="ion-ios-flask-outline"> <ion-pane ng-controller="examplecontroller"> <img ng-show="imguri !== undefined" ng-src="{{imguri}}"> <img ng-show="imguri === undefined" ng-src="http://placehold.it/300x300"> </ion-pane> </ion-tab> <ion-tab title="share" icon-on="ion-ios-upload" icon-off="ion-ios-upload-outline"> <ion-pane> <button class="button button-light shurmargen"> heheh </button> </ion-pane> </ion-tab> </ion-tabs> </ion-pane>
and .js
.controller("examplecontroller", function($scope, $cordovacamera) { $scope.takepicture = 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: false }; $cordovacamera.getpicture(options).then(function(imagedata) { $scope.imguri = "data:image/jpeg;base64," + imagedata; }, function(err) { // error occured. show message user }); } });
the camera works well, photo shows in camera tab, , need show in filters , share tabs too
thanks!
$cordovacamera.getpicture(options).then(function(imagedata) { $scope.$apply(function () { $scope.imguri = "data:image/jpeg;base64," + imagedata; }); }, function(err) { // error occured. show message user });
you have use $scope.apply apply changes in $scope variable.
Comments
Post a Comment