How To Save An Image To A Specific Path In Ionic 3 Using Native Camera Plugin

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.

Nodejs
Latest Ionic 3 CLI
Latest Cordova
Node Command Line Window (Windows) or Terminal (OS X, Linux)
Text Editor or IDE (e.g. Visual Studio Code, Atom,)

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.

Camera

The Camera Plugin is used to take a picture and also capture a video.
File

Using the File Plugin, we can achieve the following -

Get the available free space
Check if the directory is available or not
Create a directory
Remove a directory
Move a directory from one place to another place,
Copy a directory
List an available directory
Set pre-defined path
Check if a file is available or not
Create a file
Remove a file
Write a file
Read a file as a text
Read a file and return base64 data
Read a file and return data in a binary format
Read a file and return data in an array buffer format
Move and copy files
Get a directory or file etc.

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

//here importing lines for access camera object and file plugin to our app.
import {
Camera
} from '@ionic-native/camera';
import {
File
} from '@ionic-native/file';
@NgModule({
providers: [
//here added class to our provider service block
Camera,
File
]
})
export class AppModule {}

Step 3

Now, it’s time to integrate with a component in our app.

app.ts file

import {
Camera,
CameraOptions
} from '@ionic-native/camera';
import {
File
} from '@ionic-native/file';
//here injecting camera and file class to our component part as object
constructor(private camera: Camera, private file: File) {}
//here this method is used to start a camera and take a picture and save a picture in specific mentioned part.
public getPicture() {
let base64ImageData;
const options: CameraOptions = {
//here is the picture quality in range 0-100 default value 50. Optional field
quality: 100,
/**here is the format of an output file.
*destination type default is FILE_URI.
* DATA_URL: 0 (number) - base64-encoded string,
* FILE_URI: 1 (number)- Return image file URI,
* NATIVE_URI: 2 (number)- Return image native URI
*/
destinationType: this.camera.DestinationType.DATA_URL,
/**here is the returned image file format
*default format is JPEG
* JPEG:0 (number),
* PNG:1 (number),
*/
encodingType: this.camera.EncodingType.JPEG,
/** Only works when Picture Source Type is PHOTOLIBRARY or SAVEDPHOTOALBUM.
*PICTURE: 0 allow selection of still pictures only. (DEFAULT)
*VIDEO: 1 allow selection of video only.
*/
mediaType: this.camera.MediaType.PICTURE,
/**here set the source of the picture
*Default is CAMERA.
*PHOTOLIBRARY : 0,
*CAMERA : 1,
*SAVEDPHOTOALBUM : 2
*/
sourceType: this.camera.PictureSourceType.CAMERA
}
this.camera.getPicture(options).then((imageData) => {
//here converting a normal image data to base64 image data.
base64ImageData = 'data:image/jpeg;base64,' + imageData;
/**here passing three arguments to method
*Base64 Data
*Folder Name
*File Name
*/
this.writeFile(base64ImageData, “My Picture”, “sample.jpeg”);
}, (error) => {
console.log(Error Occured: ' + error);
});
}
//here is the method is used to write a file in storage
public writeFile(base64Data: any, folderName: string, fileName: any) {
let contentType = this.getContentType(base64Data);
let DataBlob = this.base64toBlob(content, contentType);
// 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.
let filePath = this.file.externalRootDirectory + folderName;
this.file.writeFile(filePath, fileName, DataBlob, contentType).then((success) => {
console.log("File Writed Successfully", success);
}).catch((err) => {
console.log("Error Occured While Writing File", err);
})
}
//here is the method is used to get content type of an bas64 data
public getContentType(base64Data: any) {
let block = base64Data.split(";");
let contentType = block[0].split(":")[1];
return contentType;
}
//here is the method is used to convert base64 data to blob data
public base64toBlob(b64Data, contentType) {
contentType = contentType || '';
sliceSize = 512;
let byteCharacters = atob(b64Data);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
let slice = byteCharacters.slice(offset, offset + sliceSize);
let byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let blob = new Blob(byteArrays, {
type: contentType
});
return blob;
}

Step 4

Calling the getPicture method.

this.getPicture();

For further details, visit the official website.

Camera

https://ionicframework.com/docs/native/camera/
File Writing

https://ionicframework.com/docs/native/file/
File Location

Where to Store a file,

https://github.com/apache/cordova-plugin-file#where-to-store-files

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.

12 Comments

Join the conversation! Your thoughts help the community grow.

Risto Kurniawan6y ago
I want to save image in ion-img to internal storage, it is possible to use that code?
mahesh kumar7y ago
How to save csv file to desired loaction ionic 4
- Muthu Kumar7y ago
  Hi mahesh kumar, You can save any file using native file but path has been mentioned by default. For example check here, https://github.com/apache/cordova-plugin-file#where-to-store-files
ravi patel7y ago
Getting this error please help
ravi patel7y ago
The string to be decoded is not correctly encoded.Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
- Michael Bevilacqua7y ago
  I received same error, how to address this?
- Muthu Kumar7y ago
  Hi ravi patel, Sorry for delay. You need pass correct base 64 string to 'atob' method.
- Muthu Kumar7y ago
  Still issue exists, please follow this link this may help you. https://stackoverflow.com/questions/39490904/errorfailed-to-execute-atob-on-window-the-string-to-be-decoded-is-not-corr
Harshitha P7y ago
Thank You.
Muthu Kumar8y ago
Sorry that's my mistake, you can change like this, let DataBlob = this.base64toBlob(base64Data, contentType);
Harshitha P8y ago
What we need to pass in content to this method this.base64toBlob(content, contentType)
- Himanshu Goyal6y ago
  You need to pass imageData in the content, for that pass imageData in the writeFile function and later pass the same to base64toBlob, it worked for me.