How to Create Signature Pad in PHP?

PHP

Teams applying “How to Create Signature Pad in PHP?” in a production project can use inclusive leadership to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Jan 06, 2023

Hi Dev,

This tutorial is focused on how to create a signature pad in PHP. you'll learn how to create a signature pad save image in PHP. We will use how to create a signature pad using PHP. if you have a question about how to create a signature pad and save the image using PHP then I will give a simple example with a solution.

Now, let's see the article on how to create a signature pad and save the image using PHP. it's a simple example of how to create a signature pad using PHP. you can understand the concept of how to create a signature pad save image in PHP. if you have a question about how to create a signature pad in PHP then I will give a simple example with a solution.

Step 1: Create index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP Signature Pad 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="asset/jquery.signature.min.js"></script>
    <link rel="stylesheet" type="text/css" href="asset/jquery.signature.css">

   
    <style>
        .kbw-signature { width: 400px; height: 200px;}
        #sig canvas{
            width: 100% !important;
            height: auto;
        }
    </style>

   
</head>
<body>

   
<div class="container">

   
    <form method="POST" action="upload.php">

   
        <h1>PHP Signature Pad Example - Nicesnippets.com</h1>

   
        <div class="col-md-12">
            <label class="" for="">Signature:</label>
            <br/>
            <div id="sig" ></div>
            <br/>
            <button id="clear">Clear Signature</button>
            <textarea id="signature64" name="signed" style="display: none"></textarea>
        </div>

   
        <br/>
        <button class="btn btn-success">Submit</button>
    </form>

   
</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>

Step 2: Create upload.php

 <?php
    $folderPath = "upload/";

   
    $image_parts = explode(";base64,", $_POST['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);
    echo "Signature Uploaded Successfully.";
?>

Step 3: Create Directory

In this step, you need to create a directory into your project directory, which is named uploads.

I hope it could help you...