forked from thread-pond/signature-pad
-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathindex.html
99 lines (91 loc) · 4.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Accept Multiple Signatures · Signature Pad</title>
<link href="assets/jquery.signaturepad.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/flashcanvas.js"></script><![endif]-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a href="https://github.com/ezl/signature-pad"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<h1>Signature Signing Demo</h1>
<hr>
<div class="row">
<div class="col-md-9">
<p>My fork of Thomas Bradley's javascript excellent signature library: <a href="https://github.com/ezl/signature-pad">https://github.com/ezl/signature-pad</a><br>
Original library: <a href="https://github.com/thomasjbradley/signature-pad/">https://github.com/thomasjbradley/signature-pad/</a></p>
<p>Main differences:</p>
<ol>
<li>Signature smoothing</li>
<li>Variable pen width</li>
<li>Auto-resizing regenerated signatures</li>
</ol>
<h2>Try the signing demo below.</h2>
<p>
The first is the <a href="https://github.com/thomasjbradley/signature-pad/">original library by Thomas Bradley</a>,
the second is the <a href="https://github.com/ezl/signature-pad">fork with smoothing by me</a>.
</p>
<p>You an also try a <a href="examples/full-window.html">full screen signature pad demo</a>.</p>
</div><!-- .col-md-9 -->
<div class="col-md-3">
<a href="regeneration.html" class="other-page-button">
See A Demo Of Autoresizing Signature On Regeneration
</a>
</div><!-- .col-md-3 -->
</div><!-- .row -->
<hr>
<div class="row">
<div class="col-md-6">
<div class="sigPad" id="linear" style="width:404px;">
<a class="clearButton btn btn-default btn-xs pull-right" href="#clear">Start Over</a>
<p><strong>Original Library</strong></p>
<div class="sig sigWrapper" style="height:auto;">
<canvas class="pad" width="400" height="250"></canvas>
<input type="hidden" name="output" class="output">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sigPad" id="smoothed-variableStrokeWidth" style="width:404px;">
<a class="clearButton btn btn-default btn-xs pull-right" href="#clear">Start Over</a>
<p><strong>Bezier Curves w/ Variable Pen Width</strong></p>
<div class="sig sigWrapper" style="height:auto;">
<canvas class="pad" width="400" height="250"></canvas>
<input type="hidden" name="output-3" class="output">
</div>
</div>
</div><!-- .col-md-6 -->
</div><!-- .row -->
</div><!-- .container -->
<script src="assets/numeric-1.2.6.min.js"></script>
<script src="assets/bezier.js"></script>
<script src="jquery.signaturepad.js"></script>
<script>
$(document).ready(function() {
$('#linear').signaturePad({drawOnly:true, lineTop:200});
$('#smoothed').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:200});
$('#smoothed-variableStrokeWidth').signaturePad({drawOnly:true, drawBezierCurves:true, variableStrokeWidth:true, lineTop:200});
$('canvas').on("mousedown mouseup mousemove mouseout mousein", function() {
var sig = $(this).siblings("input.output");
$("input.output").val(sig);
});
});
</script>
<script src="assets/json2.min.js"></script>
<style>
.padtop20px { padding-top: 20px;}
.other-page-button {
background-color: #00acec;
color: white !important;
border-radius: 5px;
display: block;
padding: 5px;
text-align: center;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
h2 { font-size: 22px;}
</style>
</body>