I understand this is a bit outdated, but I'm sure there are many others with the same problem.
I had exactly the same problems when I needed to display signatures for end users in a standard desktop or mobile browser without additional modules or installation. I spoke with Topaz, and it is possible to run ActiveX on the server side, using the object model of PHP components to create the image. Unfortunately, this only works on a Windows server and requires a lot of effort. I managed to get it to work only on my test bench, and it was useless for my production Linux servers. I contacted Topaz again and they said that the ONLY other option was the Java applet!?
ActiveX! Java applets! This is 2019, not 2009! (Sorry, I overdosed there exclamation points, except God).
In the end, I decided to try to decode it myself and eventually suggested this PHP function for creating SVG. The format they use is proprietary (and in fact it’s a bit of a hacker mess), but, in fact, these are just hexadecimal numbers, coordinates and the stroke length - so for someone it should be easy enough to convert the data below to any other platform.
//Requires $SigString and accepts optional filename. //If filename is supplied the image will be written to that file //If no filename is supplied the SVG image will be returned as a string which can be echoed out directly function sigstring2svg($SigString, $filename = NULL) { $raw = hex2bin($SigString); //Convert Hex $arr = explode(PHP_EOL, $raw); //Split into array if ($arr[1] > 0) { //Check if signature is empty $coords = array_slice($arr, 2, $arr[0]); //Separate off coordinate pairs $lines = array_slice($arr, ($arr[0] + 2), $arr[1]); //Separate off number of coordinates pairs per stroke if ($arr[1] == 1) { $lines[] = ($arr[0] + 2); //If there is only 1 line the end has to be marked } $done = 0; foreach ($lines as $line => $linevalue) { if ($linevalue > $done) { $strokes[$line] = array_slice($coords, $done, $linevalue); //Split coordinate pairs into separate strokes } $done = $linevalue; } //Split X and Y to calculate the maximum and minimum coordinates on both axis $xmax = 0; $xmin = 999999; $ymax = 0; $ymin = 999999; foreach ($strokes as $stroke => $xycoords) { foreach ($xycoords as $xycoord) { $xyc = explode(' ', $xycoord); $xy[$stroke]['x'][] = $xyc[0]; if ($xyc[0] > $xmax) $xmax = $xyc[0]; if ($xyc[0] < $xmin) $xmin = $xyc[0]; $xy[$stroke]['y'][] = $xyc[1]; if ($xyc[1] > $ymax) $ymax = $xyc[1]; if ($xyc[1] < $ymin) $ymin = $xyc[1]; } } //Add in 10 pixel border to allow for stroke $xmax += 10; $xmin -= 10; $ymax += 10; $ymin -= 10; //Calculate the canvas size and offset out anything below the minimum value to trim whitespace from top and left $xmax -= $xmin; $ymax -= $ymin; //Iterate through each stroke and each coordinate pair to make the points on the stroke to build each polyline as a string array foreach ($xy as $lines => $axis) { $polylines[$lines] = '<polyline class="sig" points="'; foreach ($xy[$lines]['x'] as $point => $val) { $x = $xy[$lines]['x'][$point]; $y = $xy[$lines]['y'][$point]; $polylines[$lines] .= ($x - $xmin) . ',' . ($y - $ymin) . ' '; } $polylines[$lines] .= '"/>'; } //Build SVG image string $image = ' <svg id="sig" data-name="sig" xmlns="http://www.w3.org/2000/svg" width="' . $xmax . '" height="' . $ymax . '" viewBox="0 0 ' . $xmax . ' ' . $ymax . '"> <defs> <style> .sig { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; } </style> </defs> <title>Signature</title> <g> '; foreach ($polylines as $polyline) { $image .= $polyline; } $image .= ' </g> </svg>'; //If file name is supplied write to file if ($filename) { try { $file = fopen($filename, 'w'); fwrite($file, $image); fclose($file); return $filename; } catch (Exception $e) { return false; } } else { //If file name is not supplied return the SVG image as a string return $image; } } else { return "Signature is empty"; } }
ScottG
source share