Find an ink annotation for a signature form field

Signature form fields don’t have a value, so if you want to find the ink annotation being used as a signature for a signature form field, it might be tricky.

The following helper function will retrieve the first ink annotation found with a bounding box that overlaps the bounding box of the provided form field’s associated widget annotation:

async function getInkSignatureForField(instance, formField) {
const pagesAnnotations = await Promise.all(
Array.from({
length: instance.totalPageCount
}).map((_, pageIndex) => instance.getAnnotations(pageIndex))
);
let signatureBoundingBox;
const signaturePageAnnotations = pagesAnnotations.filter(
(pageAnnotations) => {
const signatureWidget = pageAnnotations.find(
(annotation) =>
annotation.id === formField.annotationIds.first()
);
if (signatureWidget) {
signatureBoundingBox = signatureWidget.boundingBox;
return true;
}
return false;
}
);
return (
signaturePageAnnotations[0] &&
signaturePageAnnotations[0].find((annotation) => {
if (
annotation instanceof PSPDFKit.Annotations.InkAnnotation ||
annotation instanceof PSPDFKit.Annotations.StampAnnotation
) {
if (
annotation.boundingBox.isRectOverlapping(signatureBoundingBox)
) {
return true;
}
}
})
);
}

You can use it like so:

PSPDFKit.load(defaultConfiguration).then(async (instance) => {
const formFields = await instance.getFormFields();
const signatureFormField = formFields.find(
(formField) =>
formField instanceof PSPDFKit.FormFields.SignatureFormField
);
const signatureInkAnnotation =
signatureFormField &&
(await getInkSignatureForField(instance, signatureFormField));
console.log(signatureInkAnnotation && signatureInkAnnotation.toJS());
});

This has been tested with Nutrient Web SDK 2019.4.1.