Ability to Change Annotation Color in Apryse Viewer

WebViewer Version: 10.11.1

Do you have an issue with a specific file(s)?

  • No, the question applies to all files loaded into the viewer.

Can you reproduce using one of our samples or online demos?

  • Yes, the behaviour is the same in the Apryse demo.

Are you using the WebViewer server?

  • No.

Does the issue only happen on certain browsers?

  • No, this is a feature-related question, not a browser-specific issue.

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:
Can annotation colours be changed in the WebViewer?

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

  • We would like users to be able to change the color of annotations (e.g., rubber stamp annotations, highlights, text boxes, shapes) in the WebViewer. Currently, annotations appear in their default colours with no visible option to customise them.

Steps to reproduce:

  1. Open any PDF in the Apryse WebViewer.
  2. Add an annotation (e.g., a rubber stamp).
  3. No visible option is presented to change the annotation colour.

We’d like to know:

  1. Is it possible to allow users to select different colours for annotations via the UI or programmatically?
  2. If so, could you provide an example or documentation reference?

Please provide a link to a minimal sample where the issue is reproducible: Apryse WebViewer Demo: JavaScript PDF Viewer Demo

1 Like

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


Changing annotation colors in Apryse WebViewer is indeed possible, both programmatically and through the UI. You can customize the color of various annotations such as highlights, stamps, and text boxes by using the setStyles API or by configuring the UI to allow users to select colors.

Some things you can try:

  • Use the setStyles API to programmatically change the color of annotations. This API lets you specify colors, stroke widths, and other style properties.

  • Customize the WebViewer UI to include color selection options for annotations. This involves adding UI elements that call the setStyles API when a color is selected.

  • Extend existing annotation tools to prompt users for color selection upon creation or modification of annotations.



Here are some resources that might help you:

  • Core API Documentation: Learn how to use the setStyles API to change annotation styles.

  • Customizing Annotation Tools: Guide on extending built-in tools and customizing their behavior.

  • Free Hand Annotations: Understand how to manipulate freehand annotations, which are similar in terms of style customization.

  • Line Annotations: Insights into customizing line annotation styles, which can be applied similarly to other annotation types.



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like

Hello Jamina,

Thank you for contacting WebViewer Forums.

Stamp annotations are based off image canvas and modifying the color such as stroke or background is not possible.

Other annotations such as highlight, textbox and shapes are able to modify their color through the UI or programatically:

More information on the annotation types can be found here: Highlight Annotations in WebViewer | Apryse documentation

Regards,
Luke

1 Like