Hello friends, Today we will show Laravel 8 Signature Pad Example Tutorial. This post will help you Laravel 8 signature pad tutorial. In this example we will perform digital signature pad in Laravel 8 and also we will use jQuery signature pad plugin.
Signature Pad is a JavaScript library that drawing smooth Signature Pad on your web page and app. In this post i will give you very simple and step by step example of implement signature pad in laravel 8 application.
Example of Laravel 8 Signature Pad
Step 1 : Install Laravel Application
Create or install new laravel project for laravel 8 signature pad.
composer create-project --prefer-dist laravel/laravel signature_pad
Step 2 : Create Route
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\SignatureController; Route::get('signature_pad', [SignatureController::class, 'index']); Route::post('signature_pad', [SignatureController::class, 'store'])->name('signature_pad.store');
Step 3 : Create Controller
Now, we required to create SignatureController for laravel 8 signature pad example.
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class SignatureController extends Controller { public function index() { return view('signature_pad'); } public function store(Request $request) { $folderPath = public_path('images/'); $image = explode(";base64,", $request->signed); $image_type = explode("image/", $image[0]); $image_type_png = $image_type[1]; $image_base64 = base64_decode($image[1]); $file = $folderPath . uniqid() . '.'.$image_type_png; file_put_contents($file, $image_base64); return back()->with('success', 'Signature store successfully !!'); } }
Step 4 : Create View File
Now, create view file and save as signature_pad.blade.php
<html> <head> <title>Laravel 8 Signature Pad Example - web-tuts.com</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" /> <link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css"> <style> .kbw-signature { width: 100%; height: 200px;} #sig canvas{ width: 100% !important; height: auto;} </style> </head> <body class="bg-dark"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3 mt-5"> <div class="card"> <div class="card-header"> <h5>Laravel 8 Signature Pad Example - web-tuts.com</h5> </div> <div class="card-body"> @if ($message = Session::get('success')) <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>{{ $message }}</strong> </div> @endif <form method="POST" action="{{ route('signature_pad.store') }}"> @csrf <div class="col-md-12"> <label class="" for="">Draw Signature:</label> <br/> <div id="sig"></div> <br><br> <button id="clear" class="btn btn-danger">Clear Signature</button> <button class="btn btn-success">Save</button> <textarea id="signature" name="signed" style="display: none"></textarea> </div> </form> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script> <script type="text/javascript"> var sig = $('#sig').signature({syncField: '#signature', syncFormat: 'PNG'}); $('#clear').click(function(e) { e.preventDefault(); sig.signature('clear'); $("#signature").val(''); }); </script> </body> </html>
I hope you understand of Laravel 8 Signature Pad and it can help you…