Add Padding to Signatures

Technical Support WebViewer
1

WebViewer Version: 8.6.0

Hey guys,

I’m trying to add padding to the selection box of Signature annotations. Does anyone have an idea how to do that?
I’m calling the CreateSignatureTool method setSignature(base64Image) and add the signature to the document. After adding the signature, I select it. There is no padding around the signature, so it goes straigh to the selection border. I’m looking for a way to add some padding to it. I already tried to edit the SelectionModel.prototype.drawSelectionOutline function but it does not change the bounding box, only the visual representation of the border. I also tried to create a new Core.Math.Rect with adjusted dimensions from the original Rect of the annotation but calling annotation.setRect(newRect) didn’t help either.

Greetings,
Dennis

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hi,

Could you maybe attach some screenshots to better explain the issue here? Thanks!

Wanbo

4

Hi Wanbo, of course :slight_smile:
As you can see in this screenshot, the selection box is touching the signature. I’d like to add a padding between the selection box and the signature without changing the image itself.

signature-padding-example

5

Hi Dennis,

I just tried the getRect/setRect way and looks like it’s working for me. Sample code as below:

const rect = annot.getRect();
annot.setRect(newRect);

Note: You may need to move the annotation to see the modified rect.

Wanbo

Thanks.

6

Hi Wanbo,

getting and setting the Rect of the annotation actually changes the dimensions of the annotation. However, it just causes the contained image to grow with the bounding rect.

Greetings,
Dennis

7

Hi Dennis,

I have checked with my manager, and unfortunately we don’t have a built-in API for this currently. But there’s a workaround you can try. You can create a new image with padding around it, and pass the new image to the setSignature API:

const base64Image = '...';

const originalWidth = ..., originalHeight = ...;

const padding = 10;

const canvas = document.createElement('canvas');
canvas.width = originalWidth + (2 * padding);
canvas.height = originalHeight + (2 * padding);

const ctx = canvas.getContext('2d');
ctx.drawImage(base64Image, padding, padding);

const newImage = canvas.toDataURL();

Thanks.

Wanbo

1 Like
8

Hi Wanbo,

thank you very much for your solution. While I initially did not want to change the signature image itself, I must say that this simple approach works great. Maybe you can add padding as a feature wish for the future but for now this does the job :slight_smile: