jQuery Signature Plugin

A jQuery plugin for creating touch-friendly signature fields using the HTML5 canvas. The plugin also has the ability to record the drawn signature in JSON for later regeneration. Be aware that the jquery plugin also requires Numeric Javascript library and bezier curve helper included. It works in all modern desktop and mobile browsers and doesn’t depend on any external libraries.

Signature is a jQuery plugin that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger on touch enabled devices (e.g. iPhones, iPads or Android devices). Signature captures signature as vector outlines of the strokes. Although Signature can export great bitmap (PNG) too, extraction of highly scalable stroke movemmovement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering. The primary features of Signature Plugin:

  • Mobile-friendly.
  • Color picker.
  • Export as an image.

Live Demo

Sign Below:

 

Your signature will appear here when you click "Save Signature"

How to Use

Add the css below to your html page

<link rel="stylesheet" href="bootstrap.css">

Create a container where you want to render signature

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<p>Sign Below:</p>
			<div class="js-signature" data-width="600" data-height="200" data-border="1px solid black"
				data-line-color="#bc0000" data-auto-fit="true"></div>
			<p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button>&nbsp;<button
					id="saveBtn" class="btn btn-default" onclick="saveSignature();">Save Signature</button></p>
			<div id="signature">
				<p><em>Your signature will appear here when you click "Save Signature"</em></p>
			</div>
		</div>
	</div>
</div>

Load jQuery library together with the Signature library into your code

<script src="jquery.js"></script>
<script src="jq-signature.js"></script>
<script>
	$(document).on('ready', function () {
		if ($('.js-signature').length) {
			$('.js-signature').jqSignature();
		}
	});

	function clearCanvas() {
		$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
		$('.js-signature').eq(0).jqSignature('clearCanvas');
		$('#saveBtn').attr('disabled', true);
	}

	function saveSignature() {
		$('#signature').empty();
		var dataUrl = $('.js-signature').eq(0).jqSignature('getDataURL');
		var img = $('<img>').attr('src', dataUrl);
		$('#signature').append($('<p>').text("Here's your signature:"));
		$('#signature').append(img);
	}

	$('.js-signature').eq(0).on('jq.signature.changed', function () {
		$('#saveBtn').attr('disabled', false);
		$('body').css("overflow", "auto");
	});
</script>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.