How to create Annotation with background image and text over it

Technical Support
1

I need to show annotation on PDF file with background image and text over it.

Right now StampAnnotation show only image and FreeTextAnnotation used for only showing text.

Custom annotation is confusing to use. There is no resource for complete example.

3

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:

4

Hey there,

In the future, please fill out the issue template correctly or your ticket will be closed with no reply.

Your best bet will be a custom annotation. I would recommend extending the Stamp annotation to render text over the image.

We have a bunch of examples of using CustomAnnotations here.

I cannot provide any example code right now because you deleted you did not provide enough detail or an example of what you expect.

Thanks!
Logan

5

Hi Logan

I am attaching example for current requirement. We can see that we have background image/watermark. Also we have text over it.

updated

Thanks
Ravi

6

Hey there,

You can use the setCustomDrawHandler api to easily extend an annotation.

Here is some code to get you started:

  const { Annotations } = instance.Core;

  Annotations.setCustomDrawHandler(Annotations.StampAnnotation, function(ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix); // Draw original annotation
    const annot = options.annotation;
  
    ctx.font = '12px Arial black'
    ctx.fillText("Hello world", 5, 5);
  });

The function is passed a canvas context, and with that context you can draw anything else you want on top of the annotation. There will be a bit of math involved here to position the text properly.

Thanks!
Logan