Create custom stamp with title and subtitle

Technical Support WebViewer
,
1

Dear community,

we use the webviewer in our application and also the stamp feature. Since our customer have various types of different stamps, we also use the custom stamp feature to create and save your custom stamps. This all works fine.

But now our customers want to be even more flexible. Meaning that they would like to create a custom stamp in the fly. So just enter a title and optionally a custom Date. To solve this we added a custom button and a custom dialog in the webviewer UI where the user can provide the information. And then we create a FreeTextAnnotation on the fly and place it in the document. But it looks not as nice as the custom stamps since it is more like a styled textfield.

So then we found that there is also the drawCustomStamp() method in the RubberStampCreateTool class. So we tried to call this method with some options in the code, but it did not work. There was an error about a missing context. Do you have an example how to use the drawCustomStamp() method?

Thanks for any help.

Best Regards
Andreas

2

Thank you for posting your question to our forum. We will provide you with an update as soon as possible.

3

Hello andreas.krummsdorf,

Please check out this guide: Stamps | Apryse Documentation
We have the ability to add a Title and a Subtitle to the custom stamp list, and you can choose what it says

Best regards,
Tyler

4

Hello Tyler,

thank you for the fast response. We already did that and we also let users create their own custom stamps. But unfortunately there is a wide range of possible titles and subtitles the users want to have. And sometimes they just want to add a stamp but do not necessarily save it as a custom stamp.

So therefore our idea is to create a custom dialog where the users can fill out the informationen needed and then add a stamp to the document. We also tried the StampAnnotation which looks really nice, but unfortunately the added to it with the setStampText() method is only visible once. But after saving this stamp annotation the text is lost and it in only say “Draft”.

So for now we are still stuck with the free text annotation, which works fiene regarding the text but I does not really look so nice as a stamp

Best regards
Andreas

5

Hello andreas.krummsdorf,

The “Draft” issue is because the annotation’s appearance isnt being generated, thus it falls back to the default “Draft” appearance.

If you could provide the code youre using to create the stamp, I can provide a solution to regenerating the appearance.

Thank you,
Tyler

6

Hey Tyler,

thanks for the feedback. Here is the code we use to create the stamp

const stamp = new webViewerInstance.Core.Annotations.StampAnnotation({
X: 100,
Y: 50,
Width: 200,
Height: 100,
});

stamp.setStampText(text);
stamp.LockedContents = true;

webViewerInstance.Core.annotationManager.addAnnotation(stamp);
webViewerInstance.Core.annotationManager.redrawAnnotation(stamp);

I hope this helps you.
Best regards
Andreas

7

Hello andreas.krummsdorf,

Following this guide: Custom-appearances | Apryse Documentation

You can adjust the stampDraw() function to fit your needs, or if you want to adjust the colours.

You can use this code snippet to generate the custom apperance:

      documentViewer.addEventListener("annotationsLoaded", async () => {
        const stamp = new instance.Core.Annotations.StampAnnotation({
          X: 100,
          Y: 50,
          Width: 200,
          Height: 100,
          PageNumber: 1,
          });
          
          stamp.setStampText("Hello!");
          stamp.LockedContents = true;

          const stampDraw = function(ctx, pageMatrix) {
            ctx.translate(-stamp.X, -stamp.Y)
            stamp.draw(ctx, pageMatrix)
          }

          const blob = await canvasToPDF(stampDraw, {
            width: stamp.Width,
            height: stamp.Height,
          });

          const doc = await instance.Core.createDocument(blob, {
            extension: 'pdf',
          });
      
          stamp.addCustomAppearance(doc, { pageNumber: 1 });
          
          instance.Core.annotationManager.addAnnotation(stamp);
          instance.Core.annotationManager.redrawAnnotation(stamp);
      })