How to Create Signature Pad in Laravel
Hi artisan, today I’m going to create signature pad in Laravel. I’m testing on Laravel 8. Let’s get started:
Table of Contents
Create Controller
At first, create a controller named SignPadController using artisan command:
php artisan make:controller SignPadController
Now open the controller and paste the code:
SignPadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SignPadController extends Controller
{
/**
* index
*/
public function index()
{
return view('sign_pad');
}
/**
* save
*/
public function save(Request $request)
{
$folderPath = public_path('uploads/');
$image_parts = explode(";base64,", $request->signed);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.' . $image_type;
file_put_contents($file, $image_base64);
return back()->with('success', 'Successfully saved the signature');
}
}
Create View
Create a blade file called sign_pad.blade.php and paste the code:
sign_pad.blade.php
<html>
<head>
<title>Laravel Signature Pad Example - MyNotePaper.com</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<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>
<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 Signature Pad Example - MyNotePaper.com</h5>
</div>
<div class="card-body">
@if (session('success'))
<div class="alert alert-success">
<span>{{ session('success') }}</span>
</div>
@endif
<form method="POST" action="{{ route('signpad.save') }}">
@csrf
<div class="col-md-12">
<label>Signature:</label>
<br/>
<div id="sig"></div>
<br/><br/>
<button id="clear" class="btn btn-danger btn-sm">Clear</button>
<textarea id="signature" name="signed" style="display: none"></textarea>
</div>
<br/>
<button class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var sig = $('#sig').signature({syncField: '#signature', syncFormat: 'PNG'});
$('#clear').click(function (e) {
e.preventDefault();
sig.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>
Define Routes
Our project is about to finish. Open web/routes.php
and define these routes:
use App\Http\Controllers\SignPadController;
Route::get('signpad', [SignPadController::class, 'index']);
Route::post('signpad', [SignPadController::class, 'save'])->name('signpad.save');
Run & Test
The project is ready to test. Run the project, visit /signpad
route and test:
That’s it. Thanks for reading.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.