199 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 6
Eternal fustrations with IBM "Help" - - this time trying to give them money
Mon, May 23rd 2016 4
Simple Example: Bootstrap
Tue, May 3rd 2016 8
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 6
REST via Service Bean
Tue, Feb 16th 2016 7
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 5
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 5
Top 10
dataTable with Categories
Tue, Jul 14th 2015 12
Simple Example: Bootstrap
Tue, May 3rd 2016 8
ComboBox - Validate so default value is not selected
Wed, Jul 1st 2015 7
REST via Service Bean
Tue, Feb 16th 2016 7
StartKeys for categorized viewPanel and number column
Sat, Jul 4th 2015 6
Import CSVs into a Notes/XPage database
Thu, Mar 24th 2016 6
HTML5 Canvas to PNG via RPC
Tue, Jun 21st 2016 6
nhttp preview won't "switch ID"
Mon, Dec 7th 2015 5
Reversing the display order of a Multi-value field (XPages)
Wed, Jan 13th 2016 5
Populate an InputText Date field (that has a calendar picker)
Fri, Jun 26th 2015 4


HTML5 Canvas to PNG via RPC
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

Declan Lynch provided a Signature Capture Control on OpenNTF some time ago. I had downloaded and played with it a bit, but hadn't had a production use for it, but it worked just like it said on the tin - drop it in and use it.

Recently I was asked to come up with a way to let people sign into an event using tablets, so a perfect opportunity to pull it out. It was a breeze to add it to the sign-in portion, we display a page on a mobile device and the user can sign in on the canvas. That was the "Wow" part of my initial presentation and his work let it go off not only without a hitch, but with next to no work on my part.

The next phase to come up is to capture the signatures as images so they can be exported and stored. Declan's control saves the co-ordinates in a text field. Here I discovered that the HTML5 canvas (which is what the control uses) has a method, toDataURL, that translates into a base64 string that can then be converted to an image. PNG is the default, but JPG also seems an option (I left it as PNG). I have put that in a CSJS button that calls a RPC that has a function that takes the string and converts it to an image, attaching that image to the document.

A few notes:

  1. I'm "cheating" on using CSJS to get the element in my sample. It's a simple page so the element is always generating the same ID. You will probably want to change that so you can use it anywhere. 
  2. The returned string starts with "data:image/png;base64," so my SSJS function strips that out.
  3. My PRC returns an alert that it is done, you can easily comment that out. 
I've not decided how I'm going to implement this yet, button clicking won't do for my workflow, but I can change that to some other event to trigger the process.

Here is a link to a document with the full XPage and the function I call.  

Cheers,
Brian





---------------------
http://dominoherald.blogspot.com/2016/06/html5-canvas-to-png-via-rpc.html
Jun 21, 2016
7 hits



Recent Blog Posts




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition