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 2954 times)
Paul M.
Posts: 30


« 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: 845


« 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

Register for WWDC 21 at https://4js.com/wwdc21online/

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


« 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 471 times.)
Reuben B.
Four Js
Posts: 845


« 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


Register for WWDC 21 at https://4js.com/wwdc21online/

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