Introduction

Ionic is a popular, open-source, and cross-platform mobile app framework that is helpful in developing or building hybrid mobile apps quickly and easily. It will save you a lot of time and money.
This article demonstrates how to take a picture in a camera and save the picture's specific path in Ionic 3 using a native camera plugin. The following tools and requirements should be prepared before starting this article.
Once we've installed Node.js, we are able to install other tools on the terminal or command line. Run the following command.
npm install -g ionic cordova
Once the installation is finished, let’s start creating an Ionic 3 app.
Create an Ionic 3 app
Open your node.js terminal and open a specific location to create the Ionic 3 app. Start a new Ionic project using the ionic start command.
ionic start myApp
This command will take a few minutes because it has installed all dependencies and modules in a project. Now, change the location to myApp.
cd myApp
Once we've changed the location of myApp, add an Android platform to your app.
ionic cordova platform add android
ionic cordova platform add browser(For Browser)
Now, run the project using the following command.
ionic serve (For Browser)
ionic cordova run android(For Device)
Make sure that you have connected the device and the settings have been set.
Now, let’s start.
Install and Configure Camera and File
Follow the below-mentioned steps.
Step1
Now, we have an Ionic app so we can move forward. First, install the camera plugin to our Ionic app using the following steps.
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera
Now, install the file plugin to the Ionic app using the following steps.
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file
Step 2
Now, we have already installed a camera plugin and file so we need to add a Camera plugin and File plugin to our app module file.
app.module.ts file
  1. //here importing lines for access camera object and file plugin to our app.
  2. import {
  3. Camera
  4. } from '@ionic-native/camera';
  5. import {
  6. File
  7. } from '@ionic-native/file';
  8. @NgModule({
  9. providers: [
  10. //here added class to our provider service block
  11. Camera,
  12. File
  13. ]
  14. })
  15. export class AppModule {}
Step 3
Now, it’s time to integrate with a component in our app.
app.ts file
  1. import {
  2. Camera,
  3. CameraOptions
  4. } from '@ionic-native/camera';
  5. import {
  6. File
  7. } from '@ionic-native/file';
  8. //here injecting camera and file class to our component part as object
  9. constructor(private camera: Camera, private file: File) {}
  10. //here this method is used to start a camera and take a picture and save a picture in specific mentioned part.
  11. public getPicture() {
  12. let base64ImageData;
  13. const options: CameraOptions = {
  14. //here is the picture quality in range 0-100 default value 50. Optional field
  15. quality: 100,
  16. /**here is the format of an output file.
  17. *destination type default is FILE_URI.
  18. * DATA_URL: 0 (number) - base64-encoded string,
  19. * FILE_URI: 1 (number)- Return image file URI,
  20. * NATIVE_URI: 2 (number)- Return image native URI
  21. */
  22. destinationType: this.camera.DestinationType.DATA_URL,
  23. /**here is the returned image file format
  24. *default format is JPEG
  25. * JPEG:0 (number),
  26. * PNG:1 (number),
  27. */
  28. encodingType: this.camera.EncodingType.JPEG,
  29. /** Only works when Picture Source Type is PHOTOLIBRARY or SAVEDPHOTOALBUM.
  30. *PICTURE: 0 allow selection of still pictures only. (DEFAULT)
  31. *VIDEO: 1 allow selection of video only.
  32. */
  33. mediaType: this.camera.MediaType.PICTURE,
  34. /**here set the source of the picture
  35. *Default is CAMERA.
  36. *PHOTOLIBRARY : 0,
  37. *CAMERA : 1,
  38. *SAVEDPHOTOALBUM : 2
  39. */
  40. sourceType: this.camera.PictureSourceType.CAMERA
  41. }
  42. this.camera.getPicture(options).then((imageData) => {
  43. //here converting a normal image data to base64 image data.
  44. base64ImageData = 'data:image/jpeg;base64,' + imageData;
  45. /**here passing three arguments to method
  46. *Base64 Data
  48. *Folder Name
  50. *File Name
  51. */
  52. this.writeFile(base64ImageData, “My Picture”, “sample.jpeg”);
  53. }, (error) => {
  54. console.log(Error Occured: ' + error);
  55. });
  56. }
  57. //here is the method is used to write a file in storage
  58. public writeFile(base64Data: any, folderName: string, fileName: any) {
  59. let contentType = this.getContentType(base64Data);
  60. let DataBlob = this.base64toBlob(content, contentType);
  61. // here iam mentioned this line this.file.externalRootDirectory is a native pre-defined file path storage. You can change a file path whatever pre-defined method.
  62. let filePath = this.file.externalRootDirectory + folderName;
  63. this.file.writeFile(filePath, fileName, DataBlob, contentType).then((success) => {
  64. console.log("File Writed Successfully", success);
  65. }).catch((err) => {
  66. console.log("Error Occured While Writing File", err);
  67. })
  68. }
  69. //here is the method is used to get content type of an bas64 data
  70. public getContentType(base64Data: any) {
  71. let block = base64Data.split(";");
  72. let contentType = block[0].split(":")[1];
  73. return contentType;
  74. }
  75. //here is the method is used to convert base64 data to blob data
  76. public base64toBlob(b64Data, contentType) {
  77. contentType = contentType || '';
  78. sliceSize = 512;
  79. let byteCharacters = atob(b64Data);
  80. let byteArrays = [];
  81. for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  82. let slice = byteCharacters.slice(offset, offset + sliceSize);
  83. let byteNumbers = new Array(slice.length);
  84. for (let i = 0; i < slice.length; i++) {
  85. byteNumbers[i] = slice.charCodeAt(i);
  86. }
  87. var byteArray = new Uint8Array(byteNumbers);
  88. byteArrays.push(byteArray);
  89. }
  90. let blob = new Blob(byteArrays, {
  91. type: contentType
  92. });
  93. return blob;
  94. }
Step 4
Calling the getPicture method.
  1. this.getPicture();
For further details, visit the official website.

Summary

In this article, we discussed how to take a picture in a camera and save a picture's specific path in Ionic 3 using a native camera plugin.
If you have any questions/issues about this article, please let me know in the comments.