In this post we can learn how to make Digital Signature Pad into your Laravel 5.8 project.
See also How to Import and Export CSV or Excel file into Laravel 5.8
See also Image Compress demo in laravel 5.8
See also Laravel best Packages in 2020.
Using the JavaScript Library we can draw the smooth signatures, It is a HTML5 Canvas based.
It is working for all modern browsers, desktop and mobile browsers.
Watch to learn: Laravel 7 Tutorial
We create a Digital E-Signature Pad with saving as a image using HTML5 canvas.
So, Let's start:
Step 1: Install Laravel 5.8 Project
Type the following command.
composer create-project --prefer-dist laravel/laravel blog "5.8.*"
Step 2: Define the route name under the web.php file
Route::get('/signature-pad', function () {
return view('signature-pad');
});
Step 3: Create a Signature Pad
Now we can create a Signature Pad view, then after we can watch how our signature pad look like into our Laravel project.
Create a signature-pad.blade.php under the project directory resources\views\
<your-project>/resources/views/signature-pad.blade.php
Write the following code into your signature-pad.blade.php file.
In this code many comments are available to understand a pieces of code work flow, if any person don't understand then tell me in comment section.
Step 4: Run Project
Finally we run project by following command:
You can run this project in
http://localhost/signature-pad/public/signature-pad or
http://127.0.0.1:8000/signature-pad
After Download the Image it's look like:
Now we can create a Signature Pad view, then after we can watch how our signature pad look like into our Laravel project.
Create a signature-pad.blade.php under the project directory resources\views\
<your-project>/resources/views/signature-pad.blade.php
Write the following code into your signature-pad.blade.php file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<style>
.jay-signature-pad {
position: relative;
display: -ms-flexbox;
-ms-flex-direction: column;
width: 100%;
height: 100%;
max-width: 500px;
max-height: 315px;
border: 1px solid #e8e8e8;
background-color: #fff;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
border-radius: 15px;
padding: 20px;
}
.txt-center {
text-align: -webkit-center;
}
</style>
</head>
<body>
<h2>Signature Pad Demo</h2>
<div id="signature-pad" class="jay-signature-pad">
<div class="jay-signature-pad--body">
<canvas id="jay-signature-pad" width=500 height=250></canvas>
</div>
<div class="signature-pad--footer txt-center">
<div class="description"><strong> SIGN ABOVE </strong></div>
<div class="signature-pad--actions txt-center">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
</div><br/>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
<script>
var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var changeColorButton = wrapper.querySelector("[data-action=change-color]");
var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
var ratio = Math.max(window.devicePixelRatio || 1, 1);
// This part causes the canvas to be cleared
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
// This library does not listen for canvas changes, so after the canvas is automatically
// cleared by the browser, SignaturePad#isEmpty might still return false, even though the
// canvas looks empty, because the internal data of this library wasn't cleared. To make sure
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.
signaturePad.clear();
}
// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;
resizeCanvas();
function download(dataURL, filename) {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);
var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
}
// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
function dataURLToBlob(dataURL) {
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
changeColorButton.addEventListener("click", function (event) {
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var color = "rgb(" + r + "," + g + "," + b +")";
signaturePad.penColor = color;
});
savePNGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = signaturePad.toDataURL();
download(dataURL, "signature.png");
}
});
saveJPGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = signaturePad.toDataURL("image/jpeg");
download(dataURL, "signature.jpg");
}
});
saveSVGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = signaturePad.toDataURL('image/svg+xml');
download(dataURL, "signature.svg");
}
});
</script>
</body>
</html>
Step 4: Run Project
Finally we run project by following command:
php artisan serve
http://localhost/signature-pad/public/signature-pad or
http://127.0.0.1:8000/signature-pad
 |
| Signature Pad |
See also How to Import and Export CSV or Excel file into Laravel 5.8
See also Image Compress demo in laravel 5.8
See also Laravel best Packages in 2020.
Conclusion
Using the Javascript Library and Signature Pad we learn to capture user signatures and store them within your Computer and your Laravel 5.8 Project.
So, Guys please Share PHP Artisan with Jay Chauhan Blog to your Technical friends and do the best coding with an easy way.
🙏🙏🙏💃💓
Very nice post. Your content is very interesting when i read that. I am glad to see your post here. Thank you so much for sharing about digital signature. Good job. stiply.nl
ReplyDeleteYou have written an information post. Looking forward to read more.
ReplyDeleteLaravel Web Development Services India
Be well, buddy! Looking forward to see more post from your side!
ReplyDeletePhp Web Development Company Bangalore | Website Developer In Bangalore | Internet Marketing Company in Bangalore | Magento Website Developer In India
Nice post Thanks for sharing such a wonderful post. Please keep us updated for more.
ReplyDeleteMobile app development Singapore
Freelance Web Development Singapore Singapore
The great service in this blog and the nice technology is visible in this blog. I am really very happy for the nice approach is visible in this blog and thank you very much for using the nice technology in this blog
ReplyDeleteelectronic signature
Excellent blog with lot of information I really impressed with this blog
ReplyDeleteGet Digital Signature Certificate in Delhi for E-Tendering, PDF Signing, E-Filing of Income Tax Return, GST Return and lots more.
Thanks a lot for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.
ReplyDeleteDigital Signature Certificate in Delhi
Contact Vakilsearch to Class 3 digital signature
ReplyDeleteThis blog post really help me to understand so many things and it's full of information. We provide Digital Signature Software
ReplyDeleteCommute Vakilsearch website to class 2 digital signature online
ReplyDeleteOne of the main disadvantages of private limited company is that it restricts the transfer ability of shares by its articles. In a private limited company the number of members in any case cannot exceed 200. Another disadvantage of private limited company is that it cannot issue prospectus to public.
ReplyDelete