Draw & Save User Signatures With NonnySignature.js Library

NonnySignature.js is a signature pad JavaScript library that allows you to capture user signatures on canvas and save them as PNG images.

Key features include saving signatures as PNG files, customizing stroke/background colors, and adjusting stroke width to create a personalized and interactive user experience.

How to use it:

1. Install and import the NonnySignature.

# NPM
$ npm i NonnySignature

import NonnySignature from 'Nonnysignature'

<!-- OR -->
<script src="/lib/NonnySignature.js"></script>

2. Create an empty DIV container for the signature pad.

<div class="nonny" id="signature-container"></div>

3. Initialize the signature pad and determine whether to use your own template.

const signature = new NonnySignature("#signature-container", false);

4. Override the default template & styles.

const  CONTENT = `
  <style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
  }
  .nonny {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    overflow: auto;
  }
  #signatureCanvas {
    width: 400px;
    height: 200px;
    display: block;
    border: 1px solid #000;
    cursor: crosshair;
    background-color: #fff;
  }
  button {
    padding: 8px;
    border: none;
    outline: none;
    border-radius: 10px;
  }
  .action {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  button {
    margin-top: 8px;
  }
  img {
    background: #fff;
  }
  @media (max-width: 600px) {
    .nonny {
      width: 100%;
    }
  }
  @media (max-width: 404px) {
    #signatureCanvas {
      width: 100%;
      height: 200px;
      display: block;
      border: 1px solid #000;
      cursor: crosshair;
      background-color: #fff;
    }
    img {
      width: 100%;
    }
  }
  </style>
  <canvas id="signatureCanvas" width="400" height="200"></canvas>
  <div class="action">
  <button type="button" class="nonny-clear">Clear</button>
  <button type="button" class="nonny-save">Save</button>
  <button type="button" class="nonny-undo">Undo</button>
  <button type="button" class="nonny-redo">Redo</button>
  <input type="color" class="nonny-color" value="#000000" />
  <input type="color" class="nonny-bgColor" value="#FFFFFF" />
  <button type="button" class="nonny-sizeup">+</button>
  <button type="button" class="nonny-sizedown">-</button>
</div>`;

5. Event handlers.

signature.onSave((image) => {
  console.log(image);
  document.querySelector("#signatureinput").value = image;
});

Changelog:

v1.0.6 (06/29/2023)

• added saveSvg method and little logic changes

v1.0.4 (05/31/2023)

• Update

v1.0.3 (05/04/2023)

• removed all console.log