How to Create Signature Pad in Laravel

Oct 31, 2020
Article · 3 min
706 words

Like (0)
Favorite (0)

Hi artisan, today I’m going to create signature pad in Laravel. I’m testing on Laravel 8. Let’s get started:

Create Controller
Create View
Define Routes
Run & Test

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.

Laravel

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.