Ionic 2 Camera Example


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

In this example we are going to show how to use ionic-native’s Camera plugin to take a picture using the camera.

This example assumes that you have an ionic 2 project up and running, although these examples are in typescript, it should not be very difficult to adapt this example to run in plain old ES6.

The first thing we need to do is import the Camera module from ionic-native. This will give us the ability to take a picture from the device’s camera.

Next, we will write function that will call the camera

You will notice that we are passing two options

    saveToPhotoAlbum – This will save the photo to the user’s camera roll, we are overriding the default value of false.
    destinationType – This will return the data as a DATA_URL (i.e. the base64 encoded string). If we wanted the native uri, we would pass 2 (this would map to the actual path on the device). The full set of options for the camera can be found here: ionic-native

Now putting everything together:

Now let’s hook up a clickhandler to our page that will invoke the Camera.

And that’s all there is to it, you can now take a picture using the device’s camera in ionic 2!

If you enjoyed this article, enter your email below to get free updates!