We can add a signature on our ionic project without and with npm package like angular2-signaturepad. In this example, we are creating simple ionic apps allowing a user to write a signature on our application without angular2-signaturepad. We allow a user to write a signature and save in Base64 png and which we can save in our database as a string.
In this example we are learning touch event, 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 touches screen support and this signature will not work on the desktop browser.
- The touchstart event occurs when the user touches an element.
touchmove event occurs when a user moves the finger over an element – works only in touchscreen devices.
Steps 1: Create a new project
ionic start signaturePad blank
Step 2: Add the user interface in home.html,
We have to define a canvas element where we are writing our signature on it.
Step 3: Add css rule
Step 4: Add Typescript code to draw signature on canvas and save in base64 formats.