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 imagedestroy($im); |
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.