Signature Pad is a JavaScript library for drawing seamless signatures. It is based on HTML5 canvas and uses variable-width Bézier curve interpolation based on Smoother Signatures post by Square. It works in all desktop and mobile browsers and does not depend on any external libraries.
signature style, signature generator, online signature draw, create signature, signature design, handwritten signature generator, signature online, digital signature
How to make use of it:
1. Install and download Signature Pad.
# Yarn $ yarn add signature_pad # NPM $ npm install signature_pad --save
2. Import the UMD version of the Signature Pad library into the document.
<script src="dist/signature_pad.umd.js"></script>
3. Create a canvas element for the signature panel.
<canvas></canvas>
4. Configure the Signature pad and select the Signature pad background.
var canvas = document.querySelector("canvas"); var signaturePad = new SignaturePad(canvas, { backgroundColor: 'rgb(255, 255, 255)' });
5. Save the signature as PNG/JPG/SVG images.
// PNG signaturePad.toDataURL(); // JPG signaturePad.toDataURL("image/jpeg"); // SVG signaturePad.toDataURL("image/svg+xml");
6. Draw a signature image from the data URL.
signaturePad.fromDataURL("data:image/png;base64,...");
7. More API methods.
// returns an array of point groups const data = signaturePad.toData(); // draws a signature image from an array of point groups // with or without clearing your existing image signaturePad.fromData(data, { clear: false }); // clears the signature signaturePad.clear(); // returns true if canvas is empty signaturePad.isEmpty(); // binds/unbinds event handlers signaturePad.on(); signaturePad.off();
8. Full options to customize the signature panel.
var signaturePad = new SignaturePad(canvas, { // min/max line width minWidth: 0.5, maxWidth: 2.5, // weight used to modify new velocity based on the previous velocity velocityFilterWeight: 0.7, // draw the next point at most once per every x milliseconds throttle: 16, // background color backgroundColor: 'rgba(0,0,0,0)', // min distance minDistance: 5, // dot size dotSize: 2, // line color penColor: 'black' });
9. Event handlers.
const signaturePad = new SignaturePad(canvas); signaturePad.addEventListener("beginStroke", () => { // do something }, { once: true }); signaturePad.addEventListener("endStroke", () => { // do something }); signaturePad.addEventListener("beforeUpdateStroke", () => { // do something }); signaturePad.addEventListener("afterUpdateStroke", () => { // do something });
Smooth Signature Drawing On Canvas, Signature Pad Plugin/Github, online signature capture pad
See Demo And Download
Official Website(szimek): Click Here
This superior jQuery/javascript plugin is developed by szimek. For extra Advanced Usages, please go to the official website.
Be First to Comment