https://github.com/ibrahimker/ionic-signature-pad

Ionic plugin to input singnature pad
https://github.com/ibrahimker/ionic-signature-pad

cordova-plugin ionic ionic-framework ionic4

Last synced: about 2 months ago
JSON representation

Ionic plugin to input singnature pad

• Host: GitHub
• URL: https://github.com/ibrahimker/ionic-signature-pad
• Owner: ibrahimker
• Created: 2019-01-09T06:15:01.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T10:26:10.000Z (about 2 years ago)
• Last Synced: 2024-12-15T23:35:20.659Z (about 2 months ago)
• Topics: cordova-plugin, ionic, ionic-framework, ionic4
• Language: TypeScript
• Size: 2.74 MB
• Stars: 17
• Watchers: 1
• Forks: 7
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ionic Signature Pad

This is an ionic 4 plugin to input signature based on [wulfsolter](https://github.com/wulfsolter/angular2-signaturepad.git) repository.

It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.

![Example](https://f.cloud.github.com/assets/9873/268046/9ced3454-8efc-11e2-816e-a9b170a51004.png)

# Disclaimer

This project was tested in ionic 4.0.0-beta.15 for my personal purposes

## How to use

1. Install the plugin

```

npm install ionicsignaturepad

```

2. Import and add in app.module.ts

```

....

import { IonicSignaturePadModule,IonicsignaturepadProvider } from 'ionicsignaturepad';

....

```

2. In app.module.ts, add the module and provider to imports and providers sections

```

imports {

....

IonicSignaturePadModule,

....

}

providers [

....

IonicsignaturepadProvider,

....

]

```

3. In component.module.ts, import and export the component

```

...

import { IonicSignaturePadModule, IonicsignaturepadComponent } from 'ionicsignaturepad';

...

imports:[

IonicSignaturePadModule

]

...

exports: [

...

IonicsignaturepadComponent,

...

]

```

4. Use it in respective html like this: 

```

//Base 64 image of the signature

{{signature}}

```


4. You can also use it with optional options: 

```

//Base 64 image of the signature

{{signature}}

```