Four Js Development Tools Forum

Hi all,

We have a requirement to capture a customers signature on a mobile device. So Neil Martin pointed me to the webcomponent demo that is part of the mobile demo program. This works fine.
The problem I have is saving the input so I can add it as an image as part of a report later on.

So had a look on the net and came across this function:

function svg2img(){
 var svg = document.querySelector('svg');
 var xml = new XMLSerializer().serializeToString(svg);
 var svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
 var b64start = 'data:image/svg+xml;base64,';
 var image64 = b64start + svg64;
 return image64;
}                                                
 

 

And called from 4gl:

CALL ui.Interface.frontCall("webcomponent","call",["formonly.signature", "svg2img","",""],[res])
 

And res looks like this :

data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnIiB4bWxucz0iaHR0cDovL  - plus a lot more
 

I can then transfer it to the server and do a base64 --decode data > data.svg

I have no knowledge of javascript or html so just asking anyone with any experience  is this a resonable way to go about getting the signature to a file?


Thanks.

Have a look at https://github.com/FourjsGenero/wc_signature

That signature web component had the ability to save and view the signature as an image rather than as a sequence of MoveTo, LineTo instructions

Thanks Reuben that does what i need.

Any idea on how to make the yellow area bigger? as its a little small.

Running on android mobile with gbc.

Paul,

It is a case of setting height/width attributes of the canvas node inside the webcomponent.  Inside app.js there is a method resizeCanvas() but I'm not 100% convinced it is ever called and so the canvas element inside the WebComponent has its default width of 300 and height of 100

Reuben