Skip to main content

Laravel 5.8 Digital Signature - Signature Pad | Jquery signature pad | JayviTech

In this post we can learn how to make Digital Signature Pad into your Laravel 5.8 project.
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.

signature pad image
Signature Pad

Watch What is MVC Structure?
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.
<html lang="en">     <head>         <meta charset="utf-8">         <title>Signature Pad demo</title>         <style>             .jay-signature-pad {                 positionrelative;                 display: -ms-flexbox;                 -ms-flex-directioncolumn;                 width100%;                 height100%;                 max-width500px;                 max-height315px;                 border1px solid #e8e8e8;                 background-color#fff;                 box-shadow0 3px 20px rgba(0000.27), 0 0 40px rgba(0000.08inset;                 border-radius15px;                 padding20px;             }             .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 || 11);                 // This part causes the canvas to be cleared                 canvas.width = canvas.offsetWidth * ratio;                 canvas.height = canvas.offsetHeight * ratio;                 canvas.getContext("2d").scale(ratioratio);                 // 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(dataURLfilename) {                 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 = 0i < 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>
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:
 php artisan serve 
You can run this project in 
http://localhost/signature-pad/public/signature-pad or
http://127.0.0.1:8000/signature-pad

signature pad image
Signature Pad
After Download the Image it's look like:
sign image

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.
🙏🙏🙏💃💓

Comments

  1. 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

    ReplyDelete
  2. You have written an information post. Looking forward to read more.
    Laravel Web Development Services India

    ReplyDelete
  3. Nice post Thanks for sharing such a wonderful post. Please keep us updated for more.
    Mobile app development Singapore
    Freelance Web Development Singapore Singapore

    ReplyDelete
  4. 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
    electronic signature

    ReplyDelete
  5. Excellent blog with lot of information I really impressed with this blog
    Get Digital Signature Certificate in Delhi for E-Tendering, PDF Signing, E-Filing of Income Tax Return, GST Return and lots more.

    ReplyDelete
  6. 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.
    Digital Signature Certificate in Delhi

    ReplyDelete
  7. This blog post really help me to understand so many things and it's full of information. We provide Digital Signature Software

    ReplyDelete
  8. One 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

Post a Comment

Show Latest Post

PHP Trends in 2019: Top PHP Framework For Web Developement | Latest Trends in PHP | JayVitech

It is difficult to move up with the latest web development technology when you manage the development team. Before move to latest technology, you must knowing about the latest technologies features. Using this strategy you know about the technologies full advantages to maintain your quality and improving a business performance. In this post we discuss about the Latest Trending PHP Framework for your web development to grow the organization's business performance. PHP Framework used for? Hypertext Preprocessor (PHP) or Personal Home Page (PHP) is most widely server-side programming languages over the world. PHP is a opensource, extensible and platform-independent programming language. it is easy to learn, understand and use. PHP is open source but developers not need to wait the update is released.  We always be updated with the new or changing PHP trends. The maintenance and web development costs are highly affordable. Trend of PHP Freamworks for Web Devel

Add and Remove Input Fields Dynamically with Jquery Laravel 5.8 | PHP | JayVitech

In this post we will learn how to "Add and Remove Input Fields Dynamically with Jquery Laravel 5.8". Today, we add and remove input fields dynamically using jquery and save to the database in laravel 5.8 Project. Dynamically add input fields are usefull when you add or clone same input fields to enter the different data into form. It is good option when you need to get multiple values of same field. So, let's start: Watch Now Laravel 7 new Feature - Components Step 1: Install Laravel 5.8 Project Type the following command: composer create-project --prefer-dist laravel/laravel dynamic-fields "5.8.*" Step 2: Database Configuration In this step we configure the database. We put the database details like database name, username and password to store the data. open .env file into laravel project folder. DB_CONNECTION =mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE =jayvitech (Your database name) DB_USERNAME =root (Your user name) DB_PASS