Handdrawn Signature Questions

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

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?

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

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.

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

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

Hi Duo,

Thank you for your help! This worked perfectly for me.

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):

Duo