Custom stamp annotations

Technical Support WebViewer
, , ,
1

WebViewer Version: 10.1.1

Do you have an issue with a specific file(s)?
No
Can you reproduce using one of our samples or online demos?
No
Are you using the WebViewer server?
No
Does the issue only happen on certain browsers?
No
Is your issue related to a front-end framework?
No
Is your issue related to annotations?
Yes

Please give a brief summary of your issue:
Create custom annotation from image/svg

Please describe your issue and provide steps to reproduce it:
I have a list of icons in svg/png and I would like to add them to a dropdown so the user can click to the icon and it’s gonna insert to the pdf like stamp annotations.
image

Please provide a link to a minimal sample where the issue is reproducible:

accounting-icons.zip (32.8 KB)

2

Hello Jackson,

WebViewer currently doesn’t have an API exposed for that kind of behaviour. We will add it to our backlog as a feature request for our Product Team to review.

You can read more about our Stamp Annotations here:

All the best,
Bojan

3

Hello Jackson,

Could you please try the following API:

https://docs.apryse.com/api/web/Core.Tools.RubberStampCreateTool.html#setStandardStamps

You can also read this guide: Apryse Documentation | Documentation

Also, these threads might prove useful:

And

All the best,
Bojan

4

thanks, I found setStandardStamps on another thread. How can I set the default size of standard stamps?

Annotations added via setStandardStamps(<imageUrl>) has always the same size - #3 by jackson.tong

5

Hi Jackson,

You could try using annotation Width and Height property, paired with an event listener. Code sample that worked for me looks something like this:

instance.Core.annotationManager.addEventListener("annotationChanged", (annots, action)=>{ 
  if(annots[0] instanceof instance.Core.Annotations.StampAnnotation && action === 'add'){ 
    annots[0].Width = 60; 
    annots[0].Height = 90; 
    instance.Core.annotationManager.redrawAnnotation(annots[0]); 
  } 
})

Hope this helps.

All the best,
Bojan

6

thanks, but it also resizes existing stamp annotations, whilst I only want to apply this for newly added annotation as default size and the user can resize it later.

7

Hi Jackson,

The code snippet we have provided adds an event listener which only triggers when adding a new StampAnnotation. It shouldn’t affect the existing annotations whatsoever. Can you point out how this is different from the behaviour you mentioned above?

All the best,

Bojan

8

Here is the proof:

my code is very simple

const instance = await WebViewer({
    path: '/webviewer',
    preloadWorker: 'pdf',
    licenseKey: import.meta.env.VITE_PDFTRON_WEBVIEWER_KEY,
}, document.getElementById(container_id));

const { documentViewer, annotationManager } = instance.Core;

const tool = documentViewer.getTool('AnnotationCreateRubberStamp');

tool.setStandardStamps([
    '/assets/images/ticks/agreed-to-automated-data-feed.svg',
    '/assets/images/ticks/agreed-to-general-ledger.svg',
    '/assets/images/ticks/agreed-to-prior-year-audited-accounts.svg',
    '/assets/images/ticks/agreed-to-subsequent-bank-statement.svg',
    '/assets/images/ticks/agreed-to-superstream-reports.svg',
    '/assets/images/ticks/agreed-to-year-market-value.svg',
    '/assets/images/ticks/confirmed-by-share-registry.svg',
    '/assets/images/ticks/income-complete.svg',
    '/assets/images/ticks/reconcile-to-prior-year-file.svg',
]);

annotationManager.addEventListener("annotationChanged", (annots, action)=>{
    for (const annot of annots) {
        if (annot instanceof instance.Core.Annotations.StampAnnotation && action === 'add') {
            annot.Width = 15;
            annot.Height = 15;
            instance.Core.annotationManager.redrawAnnotation(annot);
        }
    }
});
9

Hi Jackson,

Can you please try the following code snippet and see if it solves the problem?

annotationManager.addEventListener("annotationChanged", (annots, action, { imported }) => { 
        if (!imported) { 
          for (const annot of annots) { 
            if (annot instanceof instance.Core.Annotations.StampAnnotation && action === 'add') { 
              annot.Width = 15; 
              annot.Height = 15; 
              instance.Core.annotationManager.redrawAnnotation(annot); 
            } 
          } 
        } 
      });

Also, you can read more about Annotation events here with the { imported } variable:

10

thanks, it’s working now, but it would be good if we can also resize the preview annotation as well, currenlty it only resize the annotation after you’ve place it to the doc so the user has to drag it again to the correct place.

Preview annotation which default big size
image

The actual size after it’s been placed which is small.
image

11

Hello Jackson,

WebViewer currently does not have an API for the behaviour you requested. Because preview image is just an image, not an annotation. We have submitted a feature request to our Product Team to review.

All the best,
Bojan

12

Can I have the status of this? it’s a very important feature for our product.

13

Hello jackson.tong,

Our product team has yet to put this into a sprint, we will notify you when it is available. Thank you for your patience!

Best regards,
Tyler

1 Like