Hybrid mobile applications can make very quickly, but sometimes it becomes a challenge to get the features that access the hardware such as GPS, storage, file storage, cameras, and networks. Cordova offers plugins to build relationships to use them with java libraries.

The ionic native camera plugin allows the user to click the image by using the device camera. In this topic, we are going to use the ionic camera feature in the ionic application by using the Cordova and ionic native plugin.

Now, you will see step by step all the processes of the ionic camera in the ionic application.

Step 1: Firstly, you create a new project in the ionic application. You also make sure that you have installed the latest version of the ionic framework.

Step 2: After installation of the latest version of ionic, you are required to select a blank template from the various templates. After this process, you run the following commands to install the Cordova camera plugin in the ionic application.

Step 3: In this step, you are required to import camera plugin in the app.module.ts file, as shown below:


Step 4: In this step, you also required to import the camera plugin in the home.page.ts file. Here, you create a function to click the photo, as shown below:


Step 5: In this step, you write the code in the Home.page.html file and create a button to click the photo. Here, we have created a click function to click the image, as shown below:


Step 6: In this step, you can use your android device to run the app. Before testing the app, it is required to add the platform to the app. The following command helps to install the platform with android:

If you want to run and test the app in the browser, execute the below command:


After executing the above code, you will get the output. When you click on the Click Image button, it takes the image from the device as shown below:

Ionic Camera

Camera Option

Different options are available in the ionic camera that is used in the ionic application, as shown in the following table:

S.No Parameter Type Description
1. allowEdit Boolean It allows the user to edit the image before selection.
2. cameraDirection number It is used to choose the camera direction. By default, camera is back and back = 0, front = 1.
3. destinationType number It is used to choose the format of the camera picture.
4. encodingType number It is used to choose the encoding image.
5. correctOrientatiom boolean It is used to rotate the image to the correct orientation of the device during the image capturing.
6. popoverOptions string It is used for iOS options that specify a popover location on the IPad.
7. quality number It is used to set the image quality in range 0 to 100. The default is 50.
8. mediaType number It is used to set the type of media.
9. sourceType number It is used to set the source of the picture.
10. saveToPhotoAlbum boolean It is used to save images in the photo album on the device.
11. targetHeight number It is used to scaling the image width in pixels.
12. targetWidth number It is used to scaling the image height in pixels.

Pin It on Pinterest

Share This