Adding a signature to a document with just PHP, HTML and jQuery

June 19, 2021
1:49 am

The Ask

On a recent project, the client requested to give users the ability to sign a document and share it on social media. My initial thought was to find a plugin that will satisfy that need. Since the site was built on WordPress, I scoured the plugin directory and found some pretty cool options but none offered the simplicity I was looking for. Most had some of the functionality for free and I tend to stay away from plugins unless necessary.

The Problem

My research led me to DocuSign and DigiSigner, which both had some really interesting advanced features. I just don’t think the client could justify giving the users this feature for a monthly subscription. So I decided to build a simple solution myself.

The Solution

Since the document is something that would need to be generated on the server, I knew I needed to implore PHP’s GD Library. Most servers with PHP already have the GD library enabled and I didn’t think this would have been an issue.

I found the font I want I wanted to use. I would suggest looking at the handwriting font on Google Fonts.

I also had the base document in the JPG format. I opened the JPG in Photoshop and found the exact location of where I wanted the text to appear. The document was 1170×1515. There was both a signature and a date that had to appear. Here is the bottom portion of the document:

In order to generate the image. I needed to display an html image with the image src set to a php page with the header setting the content type of jpg. The following is the code:

<?php
//Set the Content Type
header('Content-type: image/jpeg');

// Create Image From Existing File
$jpg_document = imagecreatefromjpeg('document.jpg');

// Allocate A Color For The Text
$font_color = imagecolorallocate($jpg_document, 0, 0, 0);

// Set Path to Font File
$font_path = './font.ttf';

// Set Text to Be Printed On Image
$text = $_REQUEST['name'];
$day = date('jS');
$month_year = date('F Y');

// Signature
imagettftext($jpg_document, 25, 0, 160, 1425, $font_color, $font_path, $text);

// Day
imagettftext($jpg_document, 25, 0, 700, 1425, $font_color, $font_path, $day);

// Month & Year
imagettftext($jpg_document, 25, 0, 900, 1425, $font_color, $font_path, $month_year);

// Send Image to Browser
imagejpeg($jpg_document);

// Clear Memory
imagedestroy($jpg_document);
?>

I wanted the user to see the document change as they began to type. So I used jQuery to pass the text to the above code. Here is my jQuery & HTML:

jQuery(document).ready(function($){
    $('.signature').on('input', function(){
        var text = $(this).val();
        var imagePath = $('.signed-document').attr('data-src');
        imagePath += "?name=" + text;
        $('.signed-document').attr({'src':imagePath});
        $('.download-link').attr({'href':imagePath});
        if(text.length > 0){
            $('.download-link').removeAttr('disabled');
        }else{
            $('.download-link').attr({'disabled':true});
        }
    })
})

<div class="field">
    <div class="control">
        <input class="input signature" type="text" placeholder="Enter your name...">
    </div>
    <p class="help">Enter your name</p>
    <div class="control">
        <a href="#"  download="signed-document.jpg" disabled class="button is-primary download-link">Download It</a>
    </div>
</div>

Here is what the form input field looked like:

Hope this helps someone.

Cheers!