Digital Signature PHP Script Example

March 17, 2020 | Category : PHP

I will explain step by step tutorial digital signature php code. if you want to see example of electronic signature php code then you are a right place. i would like to show you digital signature php script. you'll learn jquery signature pad & canvas image.

You can easily use jquery ui signature pad and save image using PHP, Laravel and Codeigniter too.

In this example we will use keith-wood jquery ui signature pad for you can create your signature on it. we will take php 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.

So, let's create index.php and upload.php file with following instruction.

First of all, you need to download jquery signature js file from here: Download jquery.signature files.

After download, you need to create new folder "asset" and extract download zip file. put jquery.signature.min.js and jquery.signature.css files into asset folder.

You also need to create "upload" folder in your root directory. we will store image on that folder.

index.php

<!DOCTYPE html>

<html>

<head>

<title>PHP Signature Pad Example - HDTuto.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="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">

<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="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 - HDTuto.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>

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

?>

I hope it can help you...