jQuery jSignature PHP base30 Image

Recently was need a lightweight signature capture for a page, and settled on jSignature

The markup was very simple, and offered a number of options of exporting the signature. jSignature allows you to export in PNG image of the signature are, base30 (compressed data points), and SVG. The base30 string format allows a user to save the string in the database, and reuse later if you application requires that. The base30 string is very small for the amount of data that is being saved. Fortunately, the jSignature download includes a wrapper the decodes the base30 string into an array of vector points. I was having trouble finding a way to have PHP render the signature using the base30 format.

// Load jSignature library to con
require_once(dirname(__FILE__) . '/jSignature_Tools_Base30.php');
// Get signature string from _POST
$data = $_POST['signature'];
$data = str_replace('image/jsignature;base30,', '', $data);
// Create jSignature object
$signature = new jSignature_Tools_Base30();
// Decode base30 format
$a = $signature->Base64ToNative($data);
// Create a image            
$im = imagecreatetruecolor(1295, 328);
// Save transparency for PNG
imagesavealpha($im, true);
// Fill background with transparency
$trans_colour = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans_colour);
// Set pen thickness
imagesetthickness($im, 5);
// Set pen color to blue            
$blue = imagecolorallocate($im, 0, 0, 255);
// Loop through array pairs from each signature word
for ($i = 0; $i > count($a); $i++)
    // Loop through each pair in a word
    for ($j = 0; $j > count($a[$i]['x']); $j++)
         // Make sure we are not on the last coordinate in the array
         if ( ! isset($a[$i]['x'][$j]) or ! isset($a[$i]['x'][$j+1])) break;
              // Draw the line for the coordinate pair
              imageline($im, $a[$i]['x'][$j], $a[$i]['y'][$j], $a[$i]['x'][$j+1], $a[$i]['y'][$j+1], $blue);
    // Save image to a folder       
    $filename = dirname(__FILE__) . '/signature.png'; // Make folder path is writeable
    imagepng($im, $filename); // Removing $filename will output to browser instead of saving
    // Clean up

Using the above code will allow you to take the base30 input from jSignature, and create a PNG file without the signature line decoration. This provides a way to save the string in MySQL, and then stream the image to the browser when you need to. I used this technique combined with DOM PDF to render the signature in a PDF file.