10-Apr-2023
.
Admin
Hi Guys,
I am going to show you example of laravel signature pad. this example will help you laravel signature pad example. Here you will learn signature pad example in laravel. you can understand a concept of laravel signature pad tutorial. You just need to some step to done laravel signature pad upload example.
In this tutorial, I will explain how to create signature pad in laravel 7/6.You can easily use jquery ui signature pad and save image using laravel. i would like to give you example of larevel signature pad and save image to database. we will use jquery signature pad & canvas image.
We will use keith-wood jquery ui signature pad for you can create your signature on it. we will take laravel form and submit that signature image and store that image into folder. you just have to just create bellow two files and you can get example.
Here following example of signature pad in laravel
Step: 1 Add Route
In this step, we are doing from scratch so we will add two routes, one for signature pad and another for signature upload. So you have to simply add two new routes in your laravel application.
following path:/routes/web.php
Route::get('signaturepad','SignaturePadController@index');
Route::post('signaturepad','SignaturePadController@upload')->name('signaturepad.upload');
Step: 2 Create SignaturePadController
In third step, we will create new SignaturePadController file to handle request of created two new route. In this Controller we define two method, index() and upload(). Both method will handle route request. So let's create new controller and put code
following path:/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)
{
$folderPath = public_path('upload/');
$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', 'success Full upload signature');
}
}
Step 3: Create user blade file
In last step we will create user.blade.php file and write code of signature pad code.
<!DOCTYPE html>
<html>
<head>
<title>Laravel Signature Pad Tutorial Example-nicesnippets.com </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="//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 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 Signature Pad Tutorial Example-nicesnippets.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('signaturepad.upload') }}">
@csrf
<div class="col-md-12">
<label class="" for="">Signature:</label>
<br/>
<div id="sig" ></div>
<br/>
<button id="clear" class="btn btn-danger btn-sm">Clear Signature</button>
<textarea id="signature64" name="signed" style="display: none"></textarea>
</div>
<br/>
<button class="btn btn-success">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var sig = $('#sig').signature({syncField: '#signature64', syncFormat: 'PNG'});
$('#clear').click(function(e) {
e.preventDefault();
sig.signature('clear');
$("#signature64").val('');
});
</script>
</body>
</html>
After Create one "upload" name folder in the public folder.
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/signaturepad
It will help you...
#Laravel 7
#Jquery
#Laravel
#Laravel 6
