Creating annotations

Creating annotations through the UI

The annotation tools can be found on the WebViewer top toolbar. You can click on a tool to switch to it or click on the downward pointing arrow to see all of the other annotation tools.

Another way to switch tools is to right-click on the document which will bring up a context menu. From this menu you can select an annotation tool to switch to.

Once you've switched to an annotation tool then it varies a bit depending on which tool you're using but you'll be able to click or click + drag to create the annotation.

Creating annotations programmatically

Most of the time your users will create annotations using the built in tools but it's also possible to create them programmatically. You can find the properties and functions that are available on each type of annotation in the annotation documentation.

This code should be run inside a WebViewer config file.

Here is an example of creating a rectangle annotation, but creating other types of annotations is similar.

var annotManager = readerControl.docViewer.getAnnotationManager();

var rectangleAnnot = new Annotations.RectangleAnnotation();
rectangleAnnot.PageNumber = 1;
// values are in page coordinates with (0, 0) in the top left
rectangleAnnot.X = 100;
rectangleAnnot.Y = 150;
rectangleAnnot.Width = 200;
rectangleAnnot.Height = 50;
rectangleAnnot.Author = annotManager.getCurrentUser();

// need to draw the annotation otherwise it won't show up until the page is refreshed

Creating stamp annotations

Stamp annotations can be created from an image as a data URI. The key property for stamps is ImageData which you set with the value of your data URI. For example:

var stampAnnot = new Annotations.StampAnnotation();
stampAnnot.PageNumber = 1;
stampAnnot.X = 100;
stampAnnot.Y = 250;
stampAnnot.Width = 275;
stampAnnot.Height = 40;
// put your data URI here
stampAnnot.ImageData = 'data:image/png;base64,iVBOR....';
stampAnnot.Author = annotManager.getCurrentUser();