-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
51 lines (45 loc) · 1.46 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
<!DOCTYPE html>
<html>
<head>
<title>Signature Clone</title>
<link rel="stylesheet" type="text/css" href="./signature.css">
</head>
<body>
<div class="container">
<div class="row">
<section class="signature-component">
<h1>Draw Signature</h1>
<h2>with mouse or touch</h2>
<canvas id="signature-pad" width="400" height="200"></canvas>
<div>
<button id="save">Save</button>
<button id="clear">Clear</button>
</div>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="./signature.js"></script>
<script type="text/javascript">
var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
velocityFilterWeight: .7,
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16, // max x milli seconds on event update, OBS! this introduces lag for event update
minPointDistance: 3,
});
var saveButton = document.getElementById('save'),
clearButton = document.getElementById('clear');
saveButton.addEventListener('click', function(event) {
var data = signaturePad.toDataURL('image/png');
window.open(data);
});
clearButton.addEventListener('click', function(event) {
signaturePad.clear();
});
</script>
</body>
</html>