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 SignPadControllerNow open the controller and paste the code:
<?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:
<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:
Share on Social Media
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***
Comments (0)