How to create a Laravel signature pad
Hello all! In this article, we will talk about How to create a Laravel signature pad example. We will use a signature pad in Laravel. You want to Laravel signature pad then you are in the right place. I will give you step by step and very simple example of implement a signature pad in Laravel.
Signature Pad is a JavaScript library that takes advantage of HTML5 canvas element and javascript to create a flexible and drawing smooth Signature Pad on your web page and app.
So, if you need to add signature pad in your laravel app then follow bellow step :
Install Laravel
composer create-project --prefer-dist laravel/laravel signaturepadCreate Route
Open your route file and add following route.
#routes/web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('signaturepad', 'SignaturePadController@index');
Route::post('signature_pad', 'SignaturePadController@upload')->name('signaturepad.upload');
Create Controller
We have to create a new controller as SignaturePadController in that file we will add two methods, index() and upload().
#app/Http/Controllers/SignaturePadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SignaturePadController extends Controller
{
public function index() {
return view('signaturepad');
}
public function upload(Request $request) {
$this->validate($request,[
'signed' => 'required'
]);
$folder_path = public_path('upload/');
$img_name = explode(";base64,", $request->signed);
$img_type_aux = explode("image/", $img_name[0]);
$img_type = $img_type_aux[1];
$img_base64 = base64_decode($img_name[1]);
$file = $folder_path . time() . '.'.$img_type;
file_put_contents($file, $img_base64);
return back()->with('success', 'Successfully upload signature!');
}
}
Create View File
We have to create view file signaturepad.blade.php.
#resources/view/signaturepad.blade.php
<html>
<head>
<title> How to create Laravel signature pad - devnote.in </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://keith-wood.name/css/jquery.signature.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.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>
<style>
#sig canvas {
width: 100% !important;
height: auto;
}
.kbw-signature {
width: 100%;
height: 210px;
}
</style>
</head>
<body class="bg-success">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 mt-4">
<div class="card">
<div class="card-header text-center">
<h5>How to create Laravel signature pad - devnote.in </h5>\
</div>
<div class="card-body">
@if ( count($errors) > 0 )
@foreach($errors->all() as $er)
<div class="alert alert-danger">
{{ $er }}
</div>
@endforeach
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success">
{{ $message }}
</div>
@endif
<form method="POST" action="{{ route('signaturepad.upload') }}">
@csrf
<label>Signature: </label><br/>
<div id="signatureid" ></div><br/><br/>
<button id="clear" class="btn btn-danger btn-sm text-center">Clear Signature</button>
<textarea id="signature64" name="signed" style="display: none"></textarea>
<br/><br>
<button class="btn btn-success text-center">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var signatureid = $('#signatureid').signature({syncField: '#signature64', syncFormat: 'PNG'});
$('#clear').click(function(e) {
e.preventDefault();
signatureid.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>
Now run project using following command :
php artisan serveOpen browser and pas bellow url :
localhost:8000/signaturepad
