How to Create Signature Pad in PHP?

Jan 06, 2023

.

Admin

How to Create Signature Pad in PHP?

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

#PHP