ngp-signature-generator v1.1.1

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

Outputs

Author

• Ganesh Prabhu N

License

MIT