<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
/** #### signature-pad #### **/
.wrapper-signature-pad {
position: relative;
width: 275px;
height: 120px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad{
position: absolute;
background-image: url('https://semicon.github.io/img/watermark.png');
left: 0;
top: 0;
width: 100%;
height:100%;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<div id="signature" class="text-center">
<span class="mt-2">Sign your name</span>
<div class="wrapper-signature-pad image-bg">
<canvas id="signature-pad" class="signature-pad"></canvas>
</div>
<div class=" mt-2">
<button type="button" class="btn btn-success mx-1 w-25" id="next"/>OK</button>
<button type="button" class="btn btn-danger mx-1 w-25" id="clear"/>Clear</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- //CDN signature pad -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.5/dist/signature_pad.umd.min.js"></script>
<script>
/** Set background and pen color */
const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
});
/** Adjust the aspect ratio of the box and signature points to suit the pixel size of the screen. */
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
/**Clear signature */
const cancelButton = document.getElementById('clear');
cancelButton.addEventListener('click', function (event) {
signaturePad.clear();
});
/**Save signature */
const savePNGButton = document.getElementById('save');
savePNGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
const dataURL = signaturePad.toDataURL("image/png");
const a = document.createElement("a");
a.style = "display: none";
a.href = dataURL;
a.download = "signature.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
</script>
</body>
</html>
