Pseudo watermark that is displayed when printing

[Matt Parizeau]

Q:

How would I add a dynamic watermark to each page that will also be displayed when printing the pages?

A:

Since annotations are printed you could create a custom annotation and then add one to every page when the document is loaded. The following code will do this. It also creates a custom selection model where nothing is drawn so that the watermark doesn't appear selected. It handles the toggleAnnotations function so that watermarks aren't hidden and shown as well. All of this code could be put in a config file, however to have everything work correctly with the notes panel you'll have to make a few changes to NotesPanel.js which are listed below this first block of code.

var CustomSelectionModel = function(annotation, canModify) {
    Annotations.SelectionModel.call(this, annotation, canModify);
};
CustomSelectionModel.prototype = $.extend(true, new Annotations.BoxSelectionModel(), {
    drawSelectionOutline: function() {}
});

window.CustomWatermark = function() {
    Annotations.MarkupAnnotation.call(this);
    this.Subject = 'Watermark';
};

window.CustomWatermark.prototype = $.extend(new Annotations.MarkupAnnotation(), {
    elementName: 'watermark',
    draw: function(ctx) {
        ctx.translate(this.X, this.Y);
        ctx.rotate(-Math.PI / 4);
        ctx.font = '30px Arial';
        ctx.textBaseline = 'top';
        ctx.textAlign = 'center';
        ctx.fillStyle = '#0000FF';
        ctx.fillText('Watermark', 0, 0);
    },
    selectionModel: CustomSelectionModel
});

function addWatermarkToPage(am, pageInfo, pageIndex) {
    var watermark = new window.CustomWatermark();
    watermark.X = pageInfo.width / 2;
    watermark.Y = pageInfo.height / 2;
    watermark.PageNumber = pageIndex + 1;
    am.addAnnotation(watermark);
}

var annotsHidden = false;
$(document).on('viewerLoaded', function() {
    var docViewer = readerControl.docViewer;

    window.CoreControls.AnnotationManager.prototype.toggleAnnotations = function() {
        annotsHidden = !annotsHidden;

        var annotList = this.getAnnotationsList();
        annotList.forEach(function(annot) {
            if (!(annot instanceof window.CustomWatermark)) {
                annot.Hidden = annotsHidden;
            }
        });

        var displayMode = docViewer.getDisplayModeManager().getDisplayMode();
        var visiblePages = displayMode.getVisiblePages();
        for (var i = 0; i < visiblePages.length; i++) {
            this.drawAnnotations(visiblePages[i] + 1);
            docViewer.drawSelection(visiblePages[i] + 1);
        }
        this.trigger('annotationToggled', [annotsHidden, annotList, this.getUseFilter()]);
    };
});

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

    var doc = readerControl.docViewer.getDocument();
    var numPages = doc.getPageCount();
    for (var i = 0; i < numPages; ++i) {
        addWatermarkToPage(am, doc.getPageInfo(i), i);
    }
});

To NotesPanel.js

In the updateNotes function add the following code inside the for loop to skip watermarks:

if (annotation instanceof window.CustomWatermark) {
    continue;
}

In the annotationDoubleClicked event handler change the if check to:

if (!(annotation instanceof Annotations.FreeTextAnnotation || annotation instanceof window.CustomWatermark))

In the annotationSelected handler add the following in the for loop:

if (annotation instanceof window.CustomWatermark) {
    continue;
}

Also in the annotationSelected handler add the following just after the first if/else statement:

if (action === "selected") {
    annotations.filter(function(annot) {
        return annot instanceof window.CustomWatermark;
    }).forEach(function(annot) {
        annotManager.deselectAnnotation(annot);
    });
}

This all makes sure that watermarks don't appear in the notes panel and can't be selected.

[Justin Jung]

A simpler solution is here!

You can update the WebViewer to this build: 

http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_2.2.2.57431.zip

and add the following code to config.js:

var user = {

  name: 'UserName',

  timestamp: '8AM, Mar 22'

};

window.CustomWatermark = function() {

    Annotations.MarkupAnnotation.call(this);

    this.Listable = false;

};

window.CustomWatermark.prototype = $.extend(new Annotations.MarkupAnnotation(), {

  draw: function(ctx) {

    ctx.translate(this.X, this.Y);

    ctx.rotate(this.rotation * -Math.PI / 2);

    ctx.rotate(-Math.PI / 4);

    ctx.font = '30px Arial';

    ctx.textBaseline = 'top';

    ctx.textAlign = 'center';

    ctx.fillStyle = '#0000FF';

    ctx.fillText(user.name + ' @ ' + user.timestamp, 0, 0);

  }

});

function addWatermarkToPage(am, pageIndex, x, y, rotation) {

    var watermark = new window.CustomWatermark();

    watermark.X = x;

    watermark.Y = y;

    watermark.PageNumber = pageIndex + 1;

    watermark.rotation = rotation;

    am.addAnnotation(watermark);

}

$(document).on('documentLoaded', function() {

  var am = readerControl.docViewer.getAnnotationManager();

  var doc = readerControl.docViewer.getDocument();

  var numPages = doc.getPageCount();

  for (var i = 0; i < numPages; ++i) {

    var pageInfo = doc.getPageInfo(i);

    var rotation = readerControl.docViewer.getCompleteRotation(i + 1);

    var x = pageInfo.width / 2;

    var y = pageInfo.height / 2;

    if (rotation % 2 === 1) {

      var tmp = x;

      x = y;

      y = tmp;

    }

    addWatermarkToPage(am, i, x, y, rotation);

  }

  var exportAnnotations = am.exportAnnotations;

  am.exportAnnotations = function(options) {

    var annotsWithoutWatermark = am.getAnnotationsList().filter(function(annot) {

      return !(annot instanceof window.CustomWatermark);

    });

    return exportAnnotations.call(am, $.extend(options, {

      annotList: annotsWithoutWatermark

    }));

  }

});

Note that documentLoaded event is triggered after getting document's meta data and before the page rendering begins.