Ionic Camera Functionality – Take a Picture or Choose from Library

Author: Ben B. 6/24/16

I recently finished an IOS app using the Ionic framework. I really enjoyed the experience. Ionic has tons of time saving features, and it is based on Apache Cordova, so you can use Cordova plugins to make apps that feel quite native.

My project comps required a button that would allow the user to choose a picture from their library or take a picture. As I searched the web for the easiest way to do this, most of the articles talked about using two plugins ( cordova-plugin-camera and cordova-imagePicker). This made me cringe. Wasn’t there a plugin powerful enough to do both? Not only that, but I got down the road a little bit and couldn’t get cordova-imagePicker to work on my project.

Hopefully this article will save you some time. 🙂

Some caveats:

  • I’ve only tested this on IOS, but in theory it should work on Android too.
  • I have the following dependencies in my package.json:
{  
  "dependencies"   {    
    "ionic": "^1.7.14",    
    "cordova": "^6.1.1",   
  } 
}

Install Cordova Camera Plugin

You need to install the Cordova Camera Plugin (e.g. I’ve installed [email protected])

ionic plugin add [email protected]

Using the Ionic CLI is important here (as opposed to the cordova CLI) because the ionic automatically adds the following line to your package.json

{
 "cordovaPlugins": [
  "[email protected]",
 ],
}

Make sure your package.json updates. An updated package.json file is helpful because then you can run `ionic state restore` and instantly have the same exact plugins as required by your code. 

Install ngCordova

You can install inCordova with bower:

bower install ngCordova --save

Then include the new file in your index.html file:

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

Now you can inject it into Angular:

angular.module('myApp', ['ngCordova']);

See the official ngCordova install directions here.

Start Using The Camera

Here is were the magic happens! Like I mentioned, other articles were saying that you needed both cordova-plugin-camera and cordova-imagePicker, but the latter isn’t necessary.

The most important part of what I’m going to show you is…

$cordovaCamera.getPicture(uploadPhotoOptions).then(takePictureSuccess,takePictureError);

A full list of options (uploadPhotoOptions) can be found at the cordova camera plugin github repo.

The most important option for our purposes is…

uploadPhotoOptions.sourceType = Camera.PictureSourceType.CAMERA;
OR
uploadPhotoOptions.sourceType = Camera.PictureSourceType.PHOTOLIBRARY

It should be pretty self explanitory. Just call $cordovaCamera with the sourceType = Camera.PictureSourceType.PHOTOLIBRARY for photolibrary and Camera.PictureSourceType.CAMERA for camera.

One gotcha…

Camera.PictureSourceType.CAMERA only works on an actual device, unfortunately you can’t test in the Ionic emulator (i.e. `ionic run emulate`).

Full Code Example

I’ve included a full working sample below.

$ionicActionSheet.show({
 buttons: [
  { text: 'Take Photo' },
  { text: 'Choose Photo' },
 ],
 cancelText: 'Cancel',
 titleText: 'Take or Choose a Photo',
 buttonClicked: buttonClicked,
});
function buttonClicked(index){
 var uploadPhotoOptions = {
   quality: 50,
   destinationType: Camera.DestinationType.DATA_URL, //FILE_URI, NATIVE_URI, or DATA_URL. DATA_URL could produce memory issues.
   sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
   encodingType: Camera.EncodingType.JPEG,
   allowEdit: true,
   targetWidth: 300,
   targetHeight: 300,
   saveToPhotoAlbum: false,
 };
 if (index == 0) { // Take photo
   uploadPhotoOptions.sourceType = Camera.PictureSourceType.CAMERA;
 } else if (index == 1) { //Choose Photo
   uploadPhotoOptions.sourceType = Camera.PictureSourceType.PHOTOLIBRARY;
 }
 $cordovaCamera.getPicture(uploadPhotoOptions).then(takePictureSuccess,takePictureError);
 function takePictureSuccess(success) { 
   vm.userProfile.image = &quot;data:image/jpeg;base64,&quot;+success; //this is how I store the image to firebase
 };
 function takePictureError(error) {
   $ionicPopup.alert({
     title: 'Photo Error',
     template: error,
   });
 };
 return true;
}

I’m happy to answer any questions you may have, just post a comment below.

About The Author

Ben currently works as a senior developer and technical business consultant outside of Boulder, Colorado.

More about this author

About Buink

Buink Web Development is a website development company founded in 2009. Although we still focus on web development, we now offer digital marketing services, web design, local SEO services, ecommerce website design, and custom logo design

Our value proposition: Buink can help you unleash the power of the internet and help your business scale with superior quality code at a competitive price and in a transparent, honest way. 

Read more about Buink

Dave G.
Dave G.
1691935511
Buink is a great place to work, as well as a great place to have quality software written. I originally contracted Buink for some web development, and it worked out so well we began working together on many different projects. Definitely an honest transparent company that needs to be considered for... your software needs.read more
Dru M.
Dru M.
1616686900
Ben’s a super responsive, thoughtful, sharp and all around great guy to work with. Excellent with his trade. I’d recommend him to anyone. Thanks Ben!
Craig A.
Craig A.
1560891037
It was a pleasure to work with Ben and his team. It is rare to find such attention to high standards of coding and devops.
Lexi S.
Lexi S.
1560872174
Grateful to have Ben and his team as such a capable, reliable partner for completing client work!
Tom S.
Tom S.
1560518288
I reached out to Buink after finding Ben’s name in a local developer/consultant listing in 2017, and I have to say, it has been an absolute pleasure to work with Buink. Ben consistently understands not just the development task laid in front of him but the business application behind the task. I’ve... never felt more comfortable with a development team than I do with Buink. I truly feel Ben and his team are integral partners in the success of my business.read more
Marilyn F.
Marilyn F.
1557787674
I could not recommend Buink Web Development more highly. Ben and his team have recently developed a budgeting app for me (both web and IOS). I have had the opportunity of working with them for over a year and I am extremely happy with the results.I would say that the biggest plus for me is that I... trust Ben completely. From the very first, Ben has helped me make decisions that were in the best interest of my company. I have never felt like he is taking advantage of me. Ben does his best to keep the whole process very open and upfront. I have really appreciated that.I tell people all the time that I love my developers. And I do. I'm very happy that I chose to use Buink to develop my apps. It was the best business decision I could have made.If you are looking for someone to develop a website or app, I strongly suggest choosing Buink Web Development. They are fantastic!Marilyn Ference, President, Defend Your Money, LLCread more
James Landon B.
James Landon B.
1535420033
Great company to help with all your web design needs!
Next Reviews
js_loader

Connect with Buink

Connect with Buink via email, send us a message, or subscribe to our blog.