https://izakaya-restaurant.com/includes/js/signature_app.js?time=1636710674

1$(document).ready(function() {
2
3  var wrapper = document.getElementById("signature-pad");
4  if (wrapper != null) {
5    
6    var clearButton = wrapper.querySelector("[data-action=clear]");
7    var undoButton = wrapper.querySelector("[data-action=undo]");
8    var savePNGButton = wrapper.querySelector("[data-action=save-png]");
9    var canvas = wrapper.querySelector("canvas");
10    var signaturePad = new SignaturePad(canvas, {
11      // It's Necessary to use an opaque color when saving image as JPEG;
12      // this option can be omitted if only saving as PNG or SVG
13      backgroundColor: 'rgb(255, 255, 255)'
14    });
15
16// Adjust canvas coordinate space taking into account pixel ratio,
17// to make it look crisp on mobile devices.
18// This also causes canvas to be cleared.
19    function resizeCanvas() {
20      // When zoomed out to less than 100%, for some very strange reason,
21      // some browsers report devicePixelRatio as less than 1
22      // and only part of the canvas is cleared then.
23      var ratio =  Math.max(window.devicePixelRatio || 1, 1);
24
25      // This part causes the canvas to be cleared
26      canvas.width = canvas.offsetWidth * ratio;
27      canvas.height = canvas.offsetHeight * ratio;
28      canvas.getContext("2d").scale(ratio, ratio);
29
30      // This library does not listen for canvas changes, so after the canvas is automatically
31      // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
32      // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
33      // that the state of this library is consistent with visual state of the canvas, you
34      // have to clear it manually.
35      signaturePad.clear();
36    }
37
38// On mobile devices it might make more sense to listen to orientation change,
39// rather than window resize events.
40    window.onresize = resizeCanvas;
41    resizeCanvas();
42
43    function download(dataURL, filename) {
44      if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
45        window.open(dataURL);
46      } else {
47        var blob = dataURLToBlob(dataURL);
48        var url = window.URL.createObjectURL(blob);
49
50        var a = document.createElement("a");
51        a.style = "display: none";
52        a.href = url;
53        a.download = filename;
54
55        document.body.appendChild(a);
56        a.click();
57
58        window.URL.revokeObjectURL(url);
59      }
60    }
61
62// One could simply use Canvas#toBlob method instead, but it's just to show
63// that it can be done using result of SignaturePad#toDataURL.
64    function dataURLToBlob(dataURL) {
65      // Code taken from https://github.com/ebidel/filer.js
66      var parts = dataURL.split(';base64,');
67      var contentType = parts[0].split(":")[1];
68      var raw = window.atob(parts[1]);
69      var rawLength = raw.length;
70      var uInt8Array = new Uint8Array(rawLength);
71
72      for (var i = 0; i < rawLength; ++i) {
73        uInt8Array[i] = raw.charCodeAt(i);
74      }
75
76      return new Blob([uInt8Array], { type: contentType });
77    }
78
79    clearButton.addEventListener("click", function (event) {
80      signaturePad.clear();
81    });
82
83    undoButton.addEventListener("click", function (event) {
84      var data = signaturePad.toData();
85
86      if (data) {
87        data.pop(); // remove the last dot or line
88        signaturePad.fromData(data);
89      }
90    });
91
92    savePNGButton.addEventListener("click", function (event) {
93      if (signaturePad.isEmpty()) {
94        alert("Please provide a signature first.");
95      } else {
96        var dataURL = signaturePad.toDataURL();
97        var data = signaturePad.toData();
98        var data_json = JSON.stringify(data);
99        $('#signature-pad input[type="hidden"]').val(data_json);
100      }
101    });
102
103    $('#signature-pad').on('mouseup touchend click',function(e){
104      var data = signaturePad.toData();
105      var data_json = JSON.stringify(data);
106      $(this).find('input[type="hidden"]').val(data_json);
107    });
108
109
110  }
111});