Signature tool not working properly, when we have updated webviewer version from 7.0.0 to 8.3.0

Hello sir/mam,
We are currently using pdftron UI 7.0.0 version for creating and editing pdfs. in that pdf we have one signature annotaion, whenever anyone try to do draw signaure, we get that signature and append current timestamp in to signature. see below image.

Screenshot 2022-03-03 114458

Below is code for appending timestamp on signature:

const signatureTool = docViewer.getTool(‘AnnotationCreateSignature’);
signatureTool.on(‘signatureSaved’, async (annotation) => {
const canvas = document.createElement(‘canvas’);
const date = new Date();
const dateText = date.toLocaleString();
// Reference the annotation from the Document
const pageMatrix = docViewer.getDocument().getPageMatrix(annotation[0].PageNumber);
// Set the height & width of the canvas to match the annotation
canvas.height = annotation[0].Height+30;
canvas.width = annotation[0].Width > 160 ? annotation[0].Width : 160;
const ctx = canvas.getContext(‘2d’);
ctx.font = ‘15px serif’;
ctx.fillStyle = rgba(${annotation[0].StrokeColor.R},${annotation[0].StrokeColor.G},${annotation[0].StrokeColor.B},${annotation[0].StrokeColor.A});
ctx.fillText(dateText, 7, annotation[0].Height+20, canvas.width-7);
// Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
ctx.translate(-annotation[0].X, -annotation[0].Y);
// Draw the Annotation onto the Canvas
annotation[0].draw(ctx,pageMatrix)
// Convert the Canvas to a Blob Object for Upload
await signatureTool.setSignature(canvas.toDataURL());
instance.closeElements([‘signatureModal’]);
});

Now we have updated pdftron version to 8.3.0 and updated the signature code:
const signatureTool = documentViewer.getTool(‘AnnotationCreateSignature’);
signatureTool.addEventListener(‘signatureSaved’, (annotation) => {
const canvas = document.createElement(‘canvas’);
const date = new Date();
const dateText = date.toLocaleString();
// Reference the annotation from the Document
const pageMatrix = documentViewer.getDocument().getPageMatrix(annotation[0].PageNumber);
// Set the height & width of the canvas to match the annotation
canvas.height = annotation[0].Height+30;
canvas.width = annotation[0].Width > 160 ? annotation[0].Width : 160;
const ctx = canvas.getContext(‘2d’);
ctx.font = ‘15px serif’;
ctx.fillStyle = rgba(${annotation[0].StrokeColor.R},${annotation[0].StrokeColor.G},${annotation[0].StrokeColor.B},${annotation[0].StrokeColor.A});
ctx.fillText(dateText, 7, annotation[0].Height+20, canvas.width-7);
// Translate the Annotation to the top Top Left Corner of the Canvas ie (0, 0)
ctx.translate(-annotation[0].X, -annotation[0].Y);
// Draw the Annotation onto the Canvas
annotation[0].draw(ctx,pageMatrix)
// Convert the Canvas to a Blob Object for Upload
signatureTool.setSignature(canvas.toDataURL());
instance.UI.closeElements([‘signatureModal’]);
});

this code is not working in 8.3.0 see below image:

Screenshot 2022-03-03 115019

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:

Hello,

Thank you for providing the sample code . Looks like there are some timing changes that is causing your code from 7.3 to not work in 8.3. Try doing the following instead

const { documentViewer, Annotations } = instance.Core;
const signatureTool = documentViewer.getTool('AnnotationCreateSignature'); 

// listen for the "annotationAdded" event instead now
signatureTool.addEventListener('annotationAdded', async (annotation) => {

    // need to check what type of annotations is being added since we don't want an infinite loop
    if (annotation instanceof Annotations.FreeHandAnnotation) {
      const canvas = document.createElement('canvas');
      const date = new Date();
      const dateText = date.toLocaleString();

      const pageMatrix = documentViewer.getDocument().getPageMatrix(annotation.PageNumber);

      canvas.height = annotation.Height+30;
      canvas.width = annotation.Width > 160 ? annotation.Width : 160;
      const ctx = canvas.getContext('2d');
      ctx.font = '15px serif';
      ctx.fillStyle = `rgba(${annotation.StrokeColor.R},${annotation.StrokeColor.G},${annotation.StrokeColor.B},${annotation.StrokeColor.A})`;
      ctx.fillText(dateText, 7, annotation.Height+20, canvas.width-7);
      ctx.translate(-annotation.X, -annotation.Y);
      annotation.draw(ctx,pageMatrix)

       // delete the freehand annotation that was added
      documentViewer.getAnnotationManager().deleteAnnotation(annotation)

       // save location of the tool and use the "setSignature" API to create a new signature to add
      let location = signatureTool.location;
      await  signatureTool.setSignature(canvas.toDataURL());
      signatureTool.location = location;
      signatureTool.addSignature()
    }

    instance.UI.closeElements(['signatureModal']);
  });

Please let me know if the above works for you

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com