ngp-signature-generator

Signature generator allows you to create cursive font style signature in a base64 format.

Table of contents

• Features
• Getting started
• Usage
• API

Features

• Allow you to specify the text for signature.
• Show the options based on settings.
• Allow to specify image height and width.
• Image will be received as base64 string.
• Allow to specify any type of font-family (Google fonts or any other).

Getting started

Step 1: Install ngp-signature-generator:

NPM

npm i ngp-signature-generator

Step 2: Import the SignatureGeneratorModule:

import {SignatureGeneratorModule} from 'ngp-signature-generator';
 
@NgModule({
  declarations: [AppComponent],
  imports: [SignatureGeneratorModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage sample

Import cursive hand writing type fonts to index.html file :

 
<link href="https://fonts.googleapis.com/css?family=Cedarville Cursive&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Indie Flower&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kristi&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Grand Hotel&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mrs Saint Delafield&display=swap" rel="stylesheet">
 

<app-signature-generator
[Text]="SignatureText"
[ShowSignature]="true"
[ImageHeight]="150"
[ImageWidth]="250"
[DataSource]="dataSource"
(SignatureAsBase64)="getBase64Signature($event)"
>
</app-signature-generator>
 
<button class="ngp-mcq-mybutton" (click)="generateSignatures()">Generate</button>
 

 
constructor() {
    this.SignatureText = "Ganesh Prabhu N";
    this.dataSource = [
      {
        FontFamily: "Cedarville Cursive",
        FontSize: "20px",
        FontWeight: "bold"
      },
      {
        FontFamily: "Indie Flower",
        FontSize: "30px",
        FontWeight: "bold"
      },
      {
        FontFamily: "Kristi",
        FontSize: "30px",
        FontWeight: "bold"
      },
      {
        FontFamily: "Grand Hotel",
        FontSize: "30px",
        FontWeight: "bold"
      },
      {
        FontFamily: "Mrs Saint Delafield",
        FontSize: "30px",
        FontWeight: "bold"
      }
    ];
  }
  getBase64Signature(event) {
    console.log("Signature" + event);
  }

API

Inputs

Input	Type	Default	Required	Description
[Text]	string	null	yes	Text to be converted as image
ShowSignature	boolean	false	no	This will hide the Signature Image On Disable and Viceversa
ImageHeight	string	200	no	Allow to specify signature image height
ImageWidth	string	200	no	Allow to specify signature image width
DataSource	Array	_	yes	Array of font type / varients for signature generation

Outputs

Output	Description
(SignatureAsBase64)	Event is emitted when selected signature is generated.

Author

• Ganesh Prabhu N

License

MIT