❤
npm
Sign UpSign In

ngp-signature-generator
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

ngp-signature-generator

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

Table of contents

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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i ngp-signature-generator

Repository

github.com/gprabhun23/ngp-Signature-Generator

Homepage

github.com/gprabhun23/ngp-Signature-Generator#readme

Weekly Downloads

15

Version

1.1.1

License

MIT

Unpacked Size

136 kB

Total Files

27

Last publish

Collaborators

  • ganeshprabhu
Try on RunKit
Report malware