1 | var wrapper = document.getElementById("signature-pad");
|
2 | var clearButton = wrapper.querySelector("[data-action=clear]");
|
3 | var changeColorButton = wrapper.querySelector("[data-action=change-color]");
|
4 | var undoButton = wrapper.querySelector("[data-action=undo]");
|
5 | var savePNGButton = wrapper.querySelector("[data-action=save-png]");
|
6 | var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
|
7 | var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
|
8 | var canvas = wrapper.querySelector("canvas");
|
9 | var signaturePad = new SignaturePad(canvas, {
|
10 |
|
11 |
|
12 | backgroundColor: 'rgb(255, 255, 255)'
|
13 | });
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | function resizeCanvas() {
|
19 |
|
20 |
|
21 |
|
22 | var ratio = Math.max(window.devicePixelRatio || 1, 1);
|
23 |
|
24 |
|
25 | canvas.width = canvas.offsetWidth * ratio;
|
26 | canvas.height = canvas.offsetHeight * ratio;
|
27 | canvas.getContext("2d").scale(ratio, ratio);
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | signaturePad.clear();
|
35 | }
|
36 |
|
37 |
|
38 |
|
39 | window.onresize = resizeCanvas;
|
40 | resizeCanvas();
|
41 |
|
42 | function download(dataURL, filename) {
|
43 | if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
|
44 | window.open(dataURL);
|
45 | } else {
|
46 | var blob = dataURLToBlob(dataURL);
|
47 | var url = window.URL.createObjectURL(blob);
|
48 |
|
49 | var a = document.createElement("a");
|
50 | a.style = "display: none";
|
51 | a.href = url;
|
52 | a.download = filename;
|
53 |
|
54 | document.body.appendChild(a);
|
55 | a.click();
|
56 |
|
57 | window.URL.revokeObjectURL(url);
|
58 | }
|
59 | }
|
60 |
|
61 |
|
62 |
|
63 | function dataURLToBlob(dataURL) {
|
64 |
|
65 | var parts = dataURL.split(';base64,');
|
66 | var contentType = parts[0].split(":")[1];
|
67 | var raw = window.atob(parts[1]);
|
68 | var rawLength = raw.length;
|
69 | var uInt8Array = new Uint8Array(rawLength);
|
70 |
|
71 | for (var i = 0; i < rawLength; ++i) {
|
72 | uInt8Array[i] = raw.charCodeAt(i);
|
73 | }
|
74 |
|
75 | return new Blob([uInt8Array], { type: contentType });
|
76 | }
|
77 |
|
78 | clearButton.addEventListener("click", function (event) {
|
79 | signaturePad.clear();
|
80 | });
|
81 |
|
82 | undoButton.addEventListener("click", function (event) {
|
83 | var data = signaturePad.toData();
|
84 |
|
85 | if (data) {
|
86 | data.pop();
|
87 | signaturePad.fromData(data);
|
88 | }
|
89 | });
|
90 |
|
91 | changeColorButton.addEventListener("click", function (event) {
|
92 | var r = Math.round(Math.random() * 255);
|
93 | var g = Math.round(Math.random() * 255);
|
94 | var b = Math.round(Math.random() * 255);
|
95 | var color = "rgb(" + r + "," + g + "," + b +")";
|
96 |
|
97 | signaturePad.penColor = color;
|
98 | });
|
99 |
|
100 | savePNGButton.addEventListener("click", function (event) {
|
101 | if (signaturePad.isEmpty()) {
|
102 | alert("Please provide a signature first.");
|
103 | } else {
|
104 | var dataURL = signaturePad.toDataURL();
|
105 | download(dataURL, "signature.png");
|
106 | }
|
107 | });
|
108 |
|
109 | saveJPGButton.addEventListener("click", function (event) {
|
110 | if (signaturePad.isEmpty()) {
|
111 | alert("Please provide a signature first.");
|
112 | } else {
|
113 | var dataURL = signaturePad.toDataURL("image/jpeg");
|
114 | download(dataURL, "signature.jpg");
|
115 | }
|
116 | });
|
117 |
|
118 | saveSVGButton.addEventListener("click", function (event) {
|
119 | if (signaturePad.isEmpty()) {
|
120 | alert("Please provide a signature first.");
|
121 | } else {
|
122 | var dataURL = signaturePad.toDataURL('image/svg+xml');
|
123 | download(dataURL, "signature.svg");
|
124 | }
|
125 | });
|