Configuring and using the image functionality

The quickstarter app contains some basic image manipulation functionality: taking a picture (Cordova Camera), cropping it, storing it (in LocalStorage), and displaying it.

There's a controller file "userProfile.ctrl.js" (and a template userProfile.html) which demonstrates the Ionic/Angular code to do this.

Now there are a few things you need to know to get it working:

It works only on a device, because it needs Cordova, and camera hardware obviously So, you need to follow the steps in the README (see https://github.com/leob/ionic-quickstarter#gulp-build) to build and install on a device:

gulp build
ionic run

Now this is easy enough but there is one 'gotcha'. When you do gulp build it will use the configuration settings from config-prod.json (https://github.com/leob/ionic-quickstarter/blob/master/src/js/config/config-prod.json).

But those settings, by default, will cause your app to run with login/auth based on Parse.com. So this will only work if you've got Parse.com set up.

If you don't want this, so if you just want to run with the "mock" (fake) auth service, and still be able to use the image functionality (on a device), then simply change the value of the "devMode" from 'false' to "true" in config-prod.json.

So, in src/js/config/config-prod.json you get this:

"devMode": true instead of "devMode": false

Now you can build and run the app on a device and it will just go to the start page or to the login page. If it goes to the login page you just put in a fake email address like a@b.com and for the password put in password. You then end up on the home page with 3 tabs.

Now either click on the "gear" icon in the top right corner, or (alternatively) select "User Profile" from the side menu.

You then see the 'User Profile" page where you can enter your (fake) user profile data, e,g. name and so on.

One other thing you can do there (which is what it's all about) is upload a profile pic. Click the image placeholder and you should get an 'action menu' where you can take or choose a pic, and then you can crop it and see how it gets displayed.