Some test text!

Creating annotations


Creating annotations through the UI
Creating annotations programmatically
Creating stamp annotations

linkCreating annotations through the UI

The annotation tools can be found on the UI header. 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.

linkCreating 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 API documentation.

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

var docViewer = myWebViewer.getInstance().docViewer;
var annotManager = docViewer.getAnnotationManager();

var Annotations = document.querySelector('iframe').contentWindow.Annotations;

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

linkCreating 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();


Get the answers you need: Support


Creating annotations through the UI
Creating annotations programmatically
Creating stamp annotations