we are trying to build our own UI and only use the Webviewer for rendering and directly interacting with the document. So far, we built components for navigating the document and creating custom annotations, even with custom draw methods. However we would like to use the built in signature tool because it offers great UX. So we need a function that takes base64 image data and calls the AnnotationCreateSignature tool so the user can move around the image and it gets placed when the left mouse is clicked. Just calling that tool with the setToolMode function doesn’t work, I suppose because no FreeHandAnnotation or StampAnnotation is selected for the signature tool. So I need to know how to pass that.
Thank you for contacting WebViewer’s support. Can I get more information about what you are trying to do with the built in “signature tool”? Did you want to
1. Create a tool for users to draw a signature and place it onto the page after
This is a bit tricky since since the popup in the UI and not in the Core code. You would want to make something similar to our “InkSignature” component InkSignature component
You would want to record a “path” and create a Freehand annotation and set the path points. Afterward you can either add the annotation to the document or use redrawAnnotation to render it as a preview before adding it
2. Click on a signature widget annotation (“Sign Here” button) and place a signature on top of it
You can do something like the following
// signatures widget has a "createInnerElement" for creating the button
const oldFunc = Annotations.SignatureWidgetAnnotation.prototype.createInnerElement
Annotations.SignatureWidgetAnnotation.prototype.createInnerElement= function () {
const ele = oldFunc.apply(this, arguments);
ele.addEventListener('click', (e) => {
if (!this.annot) {
// create a new annotation and assign it to the signature widget on click
const signature = new Annotations.StampAnnotation();
signature.setImageData("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
signature.Width = this.Width;
signature.Height = this.Height;
signature.X = this.X;
signature.Y = this.Y;
signature.PageNumber = this.PageNumber;
annotManager.addAnnotation(signature, { imported: true});
// assign the new signature annotation to the signature widget
this.annot = signature;
annotManager.drawAnnotationsFromList([signature])
}
});
return ele
}
Please let me know if the above helps or and more detail about what you are doing if not. Thank you
Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc. www.pdftron.com
thank you for your answer. Parts of it will definitely come in handy when we are going to implement predefined signature fields. I was actually talking about adding a signature without creating a “sign here” element first. I figured it out yesterday in the evening, here’s the code I used:
