Step 1— Create a basic Ionic Angular app

First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

(My node version at the time of writing the blog is 12.14.0)

Creating a basic Ionic-Angular app. Start a basic tabs starter using

$ ionic start ionicSign tabs --type=angular --cordova

The --type=angular told the CLI to create an Angular app, not a React app !!

Run the app in browser using

$ ionic serve

You won’t see much in the homepage created in the starter. I have modified the homepage a little to test our Signature functionality. To make wider space for signatures, I have kept the orientation landscape.

My homepage looks like this

HTML code for tab1.page.html is given in Step 3

Step 2 — Install required plugins

Signature Pad npm package

We’ll use the Javascript signature_pad package for our functionality. Over the years, many angular and ionic plugins have used this package to create signature pad plugins, but at the time of this post none of them is actively maintained. So it is better to use the core package itself. 

$ npm install --save signature_pad

Import the plugin in your tab1.page.ts 

import SignaturePad from 'signature_pad';

In tab1.page.html , we’ll create a canvas element, 

<canvas class="signature-pad-canvas" #canvas width="900" height="400" style="touch-action: none;"></canvas>

which can then be referenced in the JS file with

export class Tab1Page implements OnInit, AfterViewInit {

@ViewChild('canvas', { static: true }) signaturePadElement;
.....

The signature pad is rendered with 

this.signaturePad = new SignaturePad(this.signaturePadElement.nativeElement);

Base64toGallery Plugin

Our Canvas signature pad will output the signature in png format, but in base64 encoding. To save this in phone’s gallery, we can either

• Save the base64 data as a blob using FileWrite (you can use it in PWA), OR
• Use base64toGallery Ionic Native Plugin, which does the above for us in an easier fashion

Install the plugin using

$ ionic cordova plugin add cordova-base64-to-gallery

$ npm install @ionic-native/base64-to-gallery

Import the plugin in app.module.ts 

import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';

@NgModule({
...
providers: [
...
Base64ToGallery,
...
})

Import the plugin in tab1.page.ts 

import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';

constructor(private base64ToGallery: Base64ToGallery){}

Android Permissions Plugin

To save images in Android gallery, you need permission to read/write external storage. Android Permissions plugin will help ask the user for permissions. Install the plugin using

$ ionic cordova plugin add cordova-plugin-android-permissions

$ npm install @ionic-native/android-permissions

Import the plugin in app.module.ts

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
...
providers: [
...
AndroidPermissions,
...
})

Import the plugin in tab1.page.ts

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

constructor(private androidPermissions: AndroidPermissions){}

Step 3 — Implement Signature pad functionality

Following the above steps, you’ll have a canvas where you can scribble. Here’s the code for tab1.page.html and tab1.page.ts . We’ll go walk through the code step by step

tab1.page.html

tab1.page.ts

• First, we referenced the canvas element from the HTML as signaturePadElement, using @ViewChild 
• init() — In this function, we are setting width and height for the signature pad area. This is called on page load, as well as on each window resize
• In ngAfterViewInit , we create the SignaturePad and set the pen color to a specific RGB value. At this point, you can start scribbling text or your signature on the screen
• clear() — method clears the canvas of all content
• undo() — method clears out the very last stroke from the canvas
• In the save() method, we use toDataURL() This method outputs the canvas content as an image in base64 encoded data. You can then go ahead and save this in gallery using base64ToGallery plugin’s base64ToGallery method

Note : toDataURL() method outputs PNG format as default. You can give image/jpeg as an argument to get JPEG data as well. However, the base64ToGallery plugin is explicitly coded only to handle PNG data. Hence, if you try to save JPEG data from the canvas, the data will not be saved. 

Here’s how the signature pad works

So we have our own signature pad functionality built in Ionic 5 web app, with Undo and Clear functionalities. 

The Save() method will not work on ionic serve as it is dependent on a Cordova plugin. Once you build the app in Android (Step 5) , when you try to save the signature in gallery, you’ll see an error

error in saving image

(Well ! that’s very informative !!) 

This happens because we don’t have enough permission to write to the device’s storage. 

Step 4 — Save signatures in Android gallery

To get permission to write on device’s storage, we’ll use Android Permissions plugin. Install and import the plugin as shown in Step 2. After that, add/modify the following in your tab1.page.ts file

The save() function now first checks if the app has permission to save on device storage. If not, it calls requestPermissions function , where the app requests a permission using a user prompt.

Once the permission is granted, the image is saved in device’s gallery. 🎉

The Gotcha: If you’re keeping your signature pen color black, and saving image in gallery, make sure you gallery’s background color is not black. If it is, you won’t see anything but black in the image in gallery, because it is a PNG with transparency. Similar result for other color match.

Step 5 — Test in Android

If you haven’t already, build the app for a test run in Android using

$ ionic cordova platform add android

$ ionic cordova run android

This will build and run the app in your default emulator or a connected device. 

Remember, you can test the ‘Save to gallery’ functionality only on a device.

Here’s how the app functions in an android device

Congrats ! you just learnt how to sign in an Ionic 5 app, and save it in the gallery as PNG.

Conclusion

This post describes how to implement a signature pad functionality in Ionic 5 apps and PWA. You can save these signatures as PNG and use those at a later time. You can also load any image in the canvas and mark/write over the image. This can work on PDF content as well, but that is for a later post.

Happy Coding !