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

Post a Comment

Show Latest Post

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.1DB_PORT=3306DB_DATABASE=jayvitech (Your database name) DB_USERNAME=root (Your user name) DB_PASSWORD=
Step 3: Make a Database migr…

Image Compress demo in laravel 5.8 | Intervention Image - Resize image | JayviTech

In this post we will learn "How to compress image before upload in laravel 5.8".
We use intervention in laravel for compress a image. using a Laravel intervention we can easily compress a any type of image format. Intervention image package allows a image to compress and resize in laravel project. 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: Install Intervention Image We will install intervention/image package for resize image. Using this package we can make thumbnail image. Type the following command: composer require intervention/image Then open config/app.php file and add service provider and aliase name.
'providers' => [
....
Intervention\Image\ImageServiceProvider::class,
],
'aliases' => [
....
'Image' => Intervention\Image\Facades\Image::class,
],
Then after publish your package by following command
php artisan vendo…