How to take a picture and save

1

I’m trying to use the camera android, but I can not I will mouth the step by step example of ionic, but does not work follows the code

app.js

// 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'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])



    .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) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }


        });
    })

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

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

        $stateProvider

    .state('app.camera', {
        url: "/camera",
        views: {
            'menuContent': {
                templateUrl: "templates/camera.html",
                controller: 'CameraCtrl'
            }
        }
    });

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/index');

controller.js

angular.module('starter.controllers', [])

.controller('CameraCtrl', function($scope, Camera) {

    $scope.getPhoto = function() {
        Camera.getPicture().then(function(imageURI) {
            console.log(imageURI);
            $scope.lastPhoto = imageURI;
        }, function(err) {
            console.err(err);
        }, {
            quality: 75,
            targetWidth: 320,
            targetHeight: 320,
            saveToPhotoAlbum: false
        });
    };

});

service.js

angular.module('starter.services', [])

    .factory('Camera', ['$q', function($q) {

      return {
        getPicture: function(options) {
          var q = $q.defer();

          navigator.camera.getPicture(function(result) {
            // Do any magic you need
            q.resolve(result);
          }, function(err) {
            q.reject(err);
          }, options);

          return q.promise;
        }
      }
    }]);

camera.html

<ion-nav-bar class="bar bar-balanced" id="box-shadow-top">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    <h1 class="title"><i class="icon ion-ios-camera"></i> Camera</h1>
</ion-nav-bar>
<ion-view >
    <ion-content padding="true" class="has-header" scroll="true" ng-controller="CameraCtrl">
        <button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
        <img ng-src="{{lastPhoto}}" style="max-width: 100%">
    </ion-content>
</ion-view>

In the index, I make the calls the necessary files normally

http://learn.ionicframework.com/formulas/cordova-camera/

1 Like
2

Here is an example

Complete Project : https://github.com/aaronksaunders/dcww
Camera Usage: https://github.com/aaronksaunders/dcww/blob/master/www/js/controllers.js#L52

with one service that saves the image locally and one that saves it to Parse.

I was looking at your code and I dont understand why you are not using ngCordova, $cordovaCamera.getPicture since you said you reviewed the learn.ionic sample?

2 Likes
3

Awesome… thank you

1 Like
4

Wow, would you be able to make one for Ionic 3?

Ionic 2 codes are no longer valid…

Thanks,

1 Like