Tag: base30

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 conrequire_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 PNGimagesavealpha($im,true);// Fill background with transparency$trans_colour=imagecolorallocatealpha($im,0,0,0,127);imagefill($im,0,0,$trans_colour);// Set pen thicknessimagesetthickness($im,5);// Set pen color to blue $blue=imagecolorallocate($im,0,0,255);// Loop through array pairs from each signature wordfor($i=0;$i>count($a);$i++){// Loop through each pair in a wordfor($j=0;$j>count($a[$i]['x']);$j++){// Make sure we are not on the last coordinate in the arrayif(!isset($a[$i]['x'][$j]) or !isset($a[$i]['x'][$j+1]))break;// Draw the line for the coordinate pairimageline($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 writeableimagepng($im,$filename);// Removing $filename will output to browser instead of saving// Clean upimagedestroy($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.