Tutorials

Creating custom stamp annotations

WebViewer allows you to programmatically create stamp annotations from an image as a URL or a data URI.

First let's create the stamp annotation:

var stampAnnot = new Annotations.StampAnnotation();

By itself this won't do much so we need to set some properties so that it can be placed inside a document. To generate data URIs you could use an image to data URI converter online.

stampAnnot.PageNumber = 1;
stampAnnot.X = 100;
stampAnnot.Y = 250;
stampAnnot.Width = 275;
stampAnnot.Height = 40;
// put your data URI or image path here
stampAnnot.ImageData = 'data:image/png;base64,iVBOR....';

To actually add the annotation to the document we'll need to wait until the document has loaded and then use the AnnotationManager.

$(document).on('documentLoaded', function() {
    var annotManager = readerControl.docViewer.getAnnotationManager();

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

    annotManager.addAnnotation(stampAnnot);
    annotManager.drawAnnotations(stampAnnot.PageNumber);
});

And now you should see a stamp annotation on your document which you can resize or move around.