Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: Signature Capture  (Read 9623 times)
Paul M.
Posts: 31


« on: October 29, 2020, 04:50:25 pm »

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:

Code
  1. function svg2img(){
  2. var svg = document.querySelector('svg');
  3. var xml = new XMLSerializer().serializeToString(svg);
  4. var svg64 = btoa(xml); //for utf8: btoa(unescape(encodeURIComponent(xml)))
  5. var b64start = 'data:image/svg+xml;base64,';
  6. var image64 = b64start + svg64;
  7. return image64;
  8. }                                                
  9.  
 

And called from 4gl:
Code
  1. CALL ui.Interface.frontCall("webcomponent","call",["formonly.signature", "svg2img","",""],[res])
  2.  

And res looks like this :
Code
  1. data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnIiB4bWxucz0iaHR0cDovL  - plus a lot more
  2.  


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.

Reuben B.
Four Js
Posts: 1108


« Reply #1 on: October 29, 2020, 09:18:09 pm »

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

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Paul M.
Posts: 31


« Reply #2 on: October 30, 2020, 09:52:42 am »


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.


* sig1 (Small).jpg (27.41 KB, 480x853 - viewed 2137 times.)
Reuben B.
Four Js
Posts: 1108


« Reply #3 on: November 02, 2020, 01:13:16 am »

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


Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines