How to implement Ionic Signature pad drawing in Ionic 6

We can add an Ionic signature pad example on our ionic project without and with a third-party library. In this example, we are creating simple ionic apps allowing a user to write a signature on our application. We allow a user to write a signature and save it in Base64 png and which we can save in our database as a string.

In this article, we will explore how to add signatures in our Ionic application using two different libraries. We can save the signature in base64 string format and it can be easily convertible to image. Let’s get started,

Setting up and configure Ionic signature pad project

With the release of ionic version 4, the Ionic framework no longer limited to angular. Ionic allows us to create ionic projects in different front-end frameworks like Angular, Vue, and React. Let first create a blank Ionic Angular project for our ionic signature example.

ionic start signatureApps blank --type=angular


In this example we are learning touch events, touch events interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture. Touch event will work only on devices with touch screen support and this signature will not work on the desktop browser. For drawing signatures work perfectly on both mobile devices and desktops.

Here is screenshot of our Ionic signature pad example

Ionic signature pad example
  1. The touchstart event occurs when the user touches an element.
  2. touchmove event occurs when a user moves the finger over an element – works only in touchscreen devices.

Example 1: Ionic signature Pad example using signature_pad Javascript library

We will demonstrate two examples of the Ionic signatures using different libraries. In our first example, we will use the signature_pad Javascript library to implement the Ionic signature pad example. I guess and hope our first Ionic signature pad will work perfectly in Ionic React and Vue also as both frameworks is based on Javascript. Let first install the signature_pad library in our project.

npm i signature_pad --save

In our home.page.html template let added canvas to draw our signature. We have two buttons one to clear the signature canvas and the other to get signature data in base64 string format. We have to define a canvas element where we are writing our signature on it. Once we have our signature in base64 we can display it as an image using img element in our template.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic signature example 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" >
  <div>
    <canvas #canvas (touchstart)="startDrawing($event)" (touchmove)="moved($event)"></canvas>
    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <ion-button color="danger" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col size="4" offset="2">
          <ion-button color="secondary" (click)="savePad()">Save</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <img src='{{ signatureImg }}' />
</ion-content>

Once we have our canvas element add style like border, background and more on canvas element. Let edit home.page.scss file.

canvas {
  display: block;
  border: 1px solid rgb(187, 178, 178);
  background-color: var(--ion-color-success);
}

Edit home component typescript code to draw signature on canvas and save in base64 formats.


import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import SignaturePad from 'signature_pad';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  signaturePad: SignaturePad;
  @ViewChild('canvas') canvasEl : ElementRef;
  signatureImg: string;

  constructor() { }

  ngAfterViewInit() {
    this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
  }

  startDrawing(event: Event) {
    console.log(event);
    // works in device not in browser

  }

  moved(event: Event) {
    // works in device not in browser
  }

  clearPad() {
    this.signaturePad.clear();
  }

  savePad() {
    const base64Data = this.signaturePad.toDataURL();
    this.signatureImg = base64Data;
  }

}

We can easily convert base64 to an image and in most case signature are save as base64 string format in the database, so that we can modify and display easily using img tag in our template.

Example 1: Ionic signature Pad example using angular2-signaturepad library

Our second example of Ionic signature example we are using angular2-signaturepad library. Let add our library first in our project.

npm i angular2-signaturepad --save

To use the angular2-signaturepad library, first, we need to import SignaturePadModule in our home.module.ts file as follows.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { SignaturePadModule } from 'angular2-signaturepad';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    SignaturePadModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Edit home.page.html template to add the signature component tag and it has some event while drawing signature on the signature component.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic signature example 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" >
  <div class="signature-container">
    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>
    <ion-grid>
      <ion-row>
        <ion-col size="6">
          <ion-button color="danger" (click)="clearPad()">Clear</ion-button>
        </ion-col>
        <ion-col size="4" offset="2">
          <ion-button color="secondary" (click)="savePad()">Save</ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
  <img src='{{ signatureImg }}' />
</ion-content>

Edit home.page.ts typescript file to initialize our signature element and we have few methods which are easy to understand. Like the Javascript signature library, all our signature data are save in base64.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterViewInit {
  @ViewChild(SignaturePad) signaturePad: SignaturePad;
  signatureImg : string;
  signaturePadOptions: Object = { 
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() { }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }

  clearPad() {
    this.signaturePad.clear();
  }

  savePad() {
    this.signatureImg = this.signaturePad.toDataURL();
  }
}

Conclusion
We have completed two examples of drawing signatures in our Ionic application using a third party and we can also create signature without any library. All signature data are save in base64 format and we can easily display it in our template using img tag and we can convert base64 to image file also.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top