Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
signature_pad
Advanced tools
The signature_pad npm package is a JavaScript library for drawing smooth signatures. It allows users to draw signatures on a canvas element and provides functionalities to save, load, and manipulate the signature data.
Drawing Signatures
This feature allows users to draw signatures on a canvas element. The SignaturePad instance is created by passing a canvas element to the constructor.
const canvas = document.querySelector('canvas');
const signaturePad = new SignaturePad(canvas);
Saving Signatures
This feature allows users to save the drawn signature as a data URL. The toDataURL method returns the signature image as a base64-encoded PNG.
const dataURL = signaturePad.toDataURL();
console.log(dataURL);
Clearing the Canvas
This feature allows users to clear the canvas, removing any drawn signature. The clear method resets the canvas to its initial state.
signaturePad.clear();
Loading Signatures
This feature allows users to load a previously saved signature. The toData method returns an array of point groups, and the fromData method loads this data back onto the canvas.
const data = signaturePad.toData();
signaturePad.fromData(data);
react-signature-canvas is a React wrapper around the signature_pad library. It provides similar functionalities but is designed to work seamlessly with React applications. It offers a more React-friendly API and integrates well with React's state management.
Signature Pad is a JavaScript library for drawing smooth signatures. 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.
Demo works in desktop and mobile browsers. You can check out its source code for some tips on how to handle window resize and high DPI screens. You can also find more about the latter in HTML5 Rocks tutorial.
You can install the latest release using Bower - bower install signature_pad
.
You can also download the latest release from GitHub releases page or go to the latest release tag (e.g. v1.2.4) and download signature_pad.js
or signature_pad.min.js
files directly.
The master branch can contain undocumented or backward compatiblity breaking changes.
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas);
// Returns signature image as data URL
signaturePad.toDataURL();
// Draws signature image from data URL
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");
// Clears the canvas
signaturePad.clear();
// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();
0.5
.2.5
.context.fillStyle
. Defaults to "rgba(0,0,0,0)"
(transparent black). Use a non-transparent color e.g. "rgb(255,255,255)"
(opaque white) if you'd like to save signatures as JPEG images.context.fillStyle
. Defaults to "black"
.0.7
.You can set options during initialization:
var signaturePad = new SignaturePad(canvas, {
minWidth: 5,
maxWidth: 10,
penColor: "rgb(66, 133, 244)"
});
or during runtime:
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 5;
signaturePad.maxWidth = 10;
signaturePad.penColor = "rgb(66, 133, 244)";
If you are not familiar with data URI scheme, you can read more about it on Wikipedia.
There are 2 ways you can handle data URI encoded images.
You could simply store it in your database as a string and display it in HTML like this:
<img src="data:image/png;base64,iVBORw0K..." />
but this way has many disadvantages - it's not easy to get image dimensions, you can't manipulate it e.g. to create a thumbnail and it also has some performance issues on mobile devices.
Thus, more common way is to decode it and store as a file. Here's an example in Ruby:
require "base64"
data_uri = "data:image/png;base64,iVBORw0K..."
encoded_image = data_uri.split(",")[1]
decoded_image = Base64.decode64(encoded_image)
File.open("signature.png", "wb") { |f| f.write(decoded_image) }
And an example in PHP:
$data_uri = "data:image/png;base64,iVBORw0K..."
$data_pieces = explode(",", $data_uri);
$encoded_image = $data_pieces[1];
$decoded_image = base64_decode($encoded_image)
file_put_contents( "signature.png",$decoded_image);
off
method that unbinds all event handlers. Rob-otfromDataURL
on HiDPI screens.fromDataURL
on HiDPI screens.onBegin
and onEnd
callbacks when passed as options to constructor. yinseeonBegin
and onEnd
callbacks. rogerzSignaturePad#fromDataURL
on Firefox. Fr3nzzySignaturePad#isEmpty
return false after loading an image using SignaturePad#fromDataURL
. krisivanovSignaturePad#clear()
.backgroundColor
option to set custom color of the background on SignaturePad#clear()
.color
option to penColor
.SignaturePad#toDataURL()
.Released under the MIT License.
1.4.0
off
method that unbinds all event handlers. Rob-otFAQs
Library for drawing smooth signatures.
The npm package signature_pad receives a total of 518,791 weekly downloads. As such, signature_pad popularity was classified as popular.
We found that signature_pad demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.