Capture Signature from Web Page

OL Connect Professional
1

Is there a better method to capture a signature from a web page?

The notion is to create a PDF from data received from a HTML form that image of the signature signed from the web page. I’m using this example/code to draw the signature.

Example: Signature Pad demo
Code: GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing

I can use a post if I pass the base64 to a hidden text field.

document.getElementById(‘hid_sig’).value = signaturePad.toDataURL(‘image/png’);

<button id=“bnt_submit” value=“Submit” name=“bnt_submit” type=“submit” >Submit</button >
<input id=“hid_sig” name=“hid_sig” type=“text”>

Within workflow the base64 would need to be converted, named and pulled into a template dynamically to create the PDF with the signature image.

2

The base64 can be converted back into the original svg image afcourse :-).

The most simple thing you can do is within the designer (just send the raw svg response to the design with a datamapper) and add a new script with some simple lines:

        svgData = record.signature.text;
		
		// Replace encoded values with correct encoding
		svgData = svgData.replace(/&lt;/g, "<");
		svgData = svgData.replace(/&gt;/g, ">");
		svgData = svgData.replace(/&quot;/g, "\"");
		
	
		stampDiv = '\
					<div id="signature";>\
						' + svgData + '\
					</div>';
		this.append(stampDiv);