How to Create Signature Pad in Laravel

Published on Oct 31, 2020

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

  1. Create Controller
  2. Create View
  3. Define Routes
  4. 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:

Laravel Signature Pad Example
That’s it. Thanks for reading. ?

Comments (0)