Anonymous (not verified)

Handdrawn Signature Questions

0 votes
  • Does the handdrawn signature uploaded for a signer only display on signature tags that are 'capture signature' rather than 'click to sign,' or is it possible to use the signer's handdrawn signature for both?
  • When signing with handdrawn, the signer's signature appears overlapping above/behind the regularly generated 'click to sign' signature information. Is it possible for this to be separated? I've attached an image showing what I am describing.
  • Using the Signature Import Tool, I have tried to encode a signature png file I have on my computer; however, the resultant base64 string does not seem to be correct, or I am not seeing a signature as I expect when signing. I've attached the image that I attempted to use with the tool.
  • I have been given a JavaScript test signature file which encodes successfully and is what I used to get my handdrawn string resulting in the signature appearing; however, it does not seem to support image upload. Is there a more featured JavaScript implementation that converts from png, jpg, etc?

Reply to: Handdrawn Signature Questions

0 votes

Hi Aiden,

 

Thanks for your post!

For your questsions:
(1)Handdrawn signature only appears in capture signature

(2)If you want to hide the text and the watermark in the background, try to set these two package settings:

{
  "roles": [
    {
      "id": "Signer1",
      "signers": [
        {
          "email": "[email protected]",
          "firstName": "John",
          "lastName": "Smith"
        }
      ]
    }
  ],
  "documents": [
    {
      "approvals": [
        {
          "role": "Signer1",
          "fields": [
            {
              "page": 0,
              "top": 100,
              "subtype": "CAPTURE",
              "height": 50,
              "left": 100,
              "width": 200,
              "type": "SIGNATURE"
            }
          ]
        }
      ],
      "name": "Test Document"
    }
  ],
  "name": "Test Handdrawn Signature",
  "status": "SENT",
  "settings": {
    "ceremony": {
      "hideCaptureText": true,
      "hideWatermark": true
    }
  }

}

(3)I think it's somehow related to the background color of your image. When I opened the png file in Chrome, it looks grey to me. I've attached an edited version where I filled the background color with white and this file should work.

(4)The javascript file I shared to Haris doesn't have the ability to convert image to the base64 string (the raw data comes from jSignature plugin instead of reading from an image). If you are interested in implementing this functionality yourself, I've attached a thin jar version of the Signature Import tool you referenced above. With this code base, I had successfully translated the code into .NET and PHP versions.

 

Duo

Duo Liang OneSpan Evangelism and Partner Integrations Developer


Reply to: Handdrawn Signature Questions

0 votes

Hi Duo,

Thanks for your insight and the resources you've attached. I will try a JS implementation using the code you have provided.

Couple more questions:

  • Is it possible to have separate handdrawn values for signatures and initials or is it only possible to store one value per signer currently?
  • Regarding the captureText & watermark, is there an option to display them both, without overlap on the handdrawn signature? Side by side maybe; or is what you've presented already the only alternative?

Reply to: Handdrawn Signature Questions

0 votes

Hi Aiden,

 

To answer your questions inline:

"Is it possible to have separate handdrawn values for signatures and initials or is it only possible to store one value per signer currently?"

Handdrawn value can only be displayed in capture signature. On the other side, click-to-sign and initials signatures only display print font.

 

"Regarding the captureText & watermark, is there an option to display them both, without overlap on the handdrawn signature? Side by side maybe; or is what you've presented already the only alternative?"

I'm afraid those two settings are the only alternatives. You can try to have one capture signature and one click-to-sign / initials signature side by side.

 

Duo

Duo Liang OneSpan Evangelism and Partner Integrations Developer


Reply to: Handdrawn Signature Questions

0 votes

Hi Duo,

Would you be able to share the unminified JavaScript example that uses jSignature? I believe I am parsing the strokes correctly in my implementation, but not properly hashing and encoding.


Reply to: Handdrawn Signature Questions

0 votes

Hi Aidan,

 

I may need to ask for an approval to share the source code. In the meanwhile, if you can share your current implementation (here or send to [email protected]), I'd like to try and see if I can help.

 

Duo

Duo Liang OneSpan Evangelism and Partner Integrations Developer


Reply to: Handdrawn Signature Questions

0 votes

Hi Aidan,

 

Try the attached code, it allows to upload the file and prints the base64 string in console.

 

This is the parse stroke part, where I followed the logic in Java code where scans each pixel line, finds the start and end point and pushes to the rgbArray array.

          var ctx = myCanvas.getContext('2d'); 
          var width = output.width/factor;
          var height = output.height/factor;
          console.log(width+" : " + height);
          myCanvas.width = width;
          myCanvas.height = height;
          ctx.drawImage(output, 0, 0,width,height);

          var imageData = ctx.getImageData(0, 0, width, height);
          var dataArray = imageData.data;


          var rgbArray = [];

          var index = 0;
          var pixel_x,pixel_y;
          for(var y = 0; y < height; y++ )
          {
              var previous = false;
              var start,end;
              for(var x = 0; x < width; x++ )
              {
                  
                  var r = dataArray[index];
                  var g = dataArray[index+1];
                  var b = dataArray[index+2];
                  var alpha = dataArray[index+3];
                  index+= 4;
                  var drawPixel = (r+g+b) <= 300;

                  if (drawPixel && previous)
                  {
                      pixel_x = x;
                  }
                  else if (drawPixel)
                  {
                      pixel_x = x;
                      pixel_y = y;
                      start = [pixel_x,pixel_y];
                      previous = true;
                  }
                  else
                  {
                      if (previous)
                      {
                        end = [pixel_x,pixel_y];
                        rgbArray.push({x:[start[0],end[0]],y:[start[1],end[1]]});
                      }
                      previous = false;
                  }
              }
          }

For the hash and encode part, I just reused the original JS code. Let me know how this works for you.

 

Duo

Duo Liang OneSpan Evangelism and Partner Integrations Developer


Attachments

Reply to: Handdrawn Signature Questions

0 votes

Hi Aidan,

 

For your inquiry about "display both captureText & watermark without overlap on the handdrawn signature", this is available in the upcoming 11.51 release, you can find more details from the release note. A screenshot in real action looks like below (click-to-sign, capture signature, image signature from top to bottom):

23-04-17-1

 

Duo

Duo Liang OneSpan Evangelism and Partner Integrations Developer


Hello! Looks like you're enjoying the discussion, but haven't signed up for an account.

When you create an account, we remember exactly what you've read, so you always come right back where you left off