Signature to Image

A supplemental script for Signature Pad that generates an image of the signature’s JSON output server-side using PHP.

Script/1.0.1 ZIP—GitHub

Introduction
How-to
- How-to: Step-by-Step
Function Reference
Options
- Options Reference
Version History
License
Other Solutions

Introduction

Signature to Image is a simple PHP script that will take the JSON output of Signature Pad and generate an image file server-side to be saved for later. Uses the GD Image Library for image generation and PHP’s built in json_decode() if a string is passed.

Get the source code on GitHub: https://github.com/thomasjbradley/signature-to-image/

How-to

The whole signature to image generation requires just a few lines of PHP:

<?php
require_once 'signature-to-image.php';

$json = $_POST['output'];
$img = sigJsonToImage($json);

imagepng($img, 'signature.png');
imagedestroy($img);

How-to: Step-by-Step

First, include the required PHP file: signature-to-image.php.

<?php
require_once 'signature-to-image.php';

Get the signature from the form post. Signature Pad defaults to naming the post field as output.

<?php
$json = $_POST['output'];

Then, call the function, passing a string representing the JSON, submitted by Signature Pad, or an already decoded JSON object (using json_decode()).

<?php
$img = sigJsonToImage($json);

The $img variable will be an image resource, which you can either display immediately or save to a file.

Save to file

<?php
imagepng($img, 'signature.png');

Display in the browser

<?php
header('Content-Type: image/png');
imagepng($img);

Cleanup

When you have finished with the image resource, make sure to clean up after yourself and free some memory.

<?php
imagedestroy($img);

Function Reference

Method Arguments Return Description

Method	Arguments	Return	Description
`sigJsonToImage( $json, $options)`	`$json:json\|string` String or decoded JSON representing the signature output `$options:array` Array of properties to change the default options	`image resource`	Redraws the signature as a GD Library image resource

sigJsonToImage(
$json, $options)

$json:json|string

String or decoded JSON representing the signature output

$options:array

Array of properties to change the default options

image resource

Redraws the signature as a GD Library image resource

Options

Options can be passed as the second argument of the function when called. Only options that are different from the defaults need to be included in the options array.

<?php
$img = sigJsonToImage($json, array('imageSize'=>array(198, 55)));

It’s highly recommended that the options used server-side match the values used in the Javascript.

Options Reference

Name	Type	Default Value	Description
`imageSize`	`array` width, height	`array(198, 55)`	Determines the final output size of the image
`bgColour`	`array` hex red, hex green, hex blue	`array(0xff, 0xff, 0xff)`	The colour fill for the background of the image
`penWidth`	`int`	`2`	Thickness, in pixels, of the drawing pen
`penColour`	`array` hex red, hex green, hex blue	`array(0x14, 0x53, 0x94)`	Colour of the drawing ink

Version History

Check out the changelog on GitHub.

License

Signature to Image is licensed under the New BSD license, which is included in the downloadable package.