XtremeDocumentStudio .NET
Next-generation multi-format document-processing component suite for .NET developers
Compatibility
Visual Studio 2010/2012/2013/2015

How to draw watermarks on viewed pages in XtremeDocumentStudio .NET's HTML5 Document Viewer

Add watermark to the document pages during view and print operation.
Santosh Patil

Documents go through many stages of completion before being finalized or they may be categorized based on the level of secrecy of the information contained in them. It often helps to convey this meta information to the stakeholders so they are aware of the document status when working with it. One of the ways to do this is by showing a watermark on each page of the document. Also, the watermarking may only be required to be shown when viewing and printing the document and not be applied on the document itself. This article shows how to add a simple text watermark to the document being viewed or printed in our HTML5 document viewer.

If this is the first time you are trying out the viewer then we suggest you to first read the introductory article here.

Adding watermark is achieved by handling the "afterPageDraw" event in the JavaScript code. The event passes many parameters one of which is the 2D graphics context of the HTML canvas on which the document page is already drawn. The watermark text needs to be drawn using this graphics context.

After creating the document viewer object add the event handler which draws the text.

documentViewer.addEventListener("afterPageDraw",
  function (e) {
    var scaleX = e.pageScaleX;
    var scaleY = e.pageScaleY;
    var actualPageWidth = e.actualPageWidth;
    var actualPageHeight = e.actualPageHeight;
    var ctx = e.context;

    // The text to be drawn
    var watermarkText = "DRAFT";

    // Save the context
    ctx.save();

    // Size the text appropriately based on page scaling
    ctx.font = 120 * scaleX + "px Arial";

    // Color (and transparency) to use
    ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';

    // Position the text in the center of the page
    var left = (actualPageWidth * scaleX) / 2;
    var top = (actualPageHeight * scaleY) / 2;
    ctx.translate(left, top);

    // Rotate the text by 45 degrees
    ctx.rotate(-Math.PI / 4);

    // Draw it
    var textSize = ctx.measureText(watermarkText);
    var textWidth = textSize.width;
    var textWidth = textSize.width;
    ctx.fillText(watermarkText, -(textWidth / 2), 0);

    // Restore the context
    ctx.restore();
  });

That's it! You can see the screenshots below which shows the viewer displaying the document with the added watermark.

The watermark is also visible in the printed pages.

However the document itself is unchanged so a downloaded copy of it will NOT contain the watermark.

For reference here are the properties passed in the event data object of the "afterPageDraw" event:

{
  context,          // CanvasRenderingContext2D
  source,           // View being drawn. "thumbnail" for thumbnail, "viewer" for 
                    // main document view, "printer" for print view
  pageNumber,       // Page number which is drawn
  zoomPercentage,   // Page zoom percentage
  rotationAngle,    // Page rotation angle
  pageScaleX,       // Page scaling applied in horizontal direction
  pageScaleY,       // Page scaling applied in vertical direction
  actualPageWidth,  // Original page width in pixels
  actualPageHeight  // Original page height in pixels
}

---o0O0o---

Our .NET Developer Tools
XtremeDocumentStudio .NET

Multi-format document-processing component suite for .NET developers.

PDFOne .NET

A .NET PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, and bookmark PDF documents in .NET applications.

Our Delphi/C++Builder developer tools
XtremeDocumentStudio Delphi

Multi-format document-processing component suite for Delphi/C++Builder developers, covering both VCL and FireMonkey platforms.

eDocEngine VCL

A Delphi/C++Builder component suite for creating documents in over 20 formats and also export reports from popular Delphi reporting tools.

PDFtoolkit VCL

A Delphi/C++Builder component suite to edit, enhance, view, print, merge, split, encrypt, annotate, and bookmark PDF documents.

Our Java developer tools
XtremeDocumentStudio (for Java)

Multi-format document-processing component suite for Java developers.

PDFOne (for Java)

A Java PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, bookmark PDF documents in Java applications.

Our Platform-Agnostic Cloud and On-Premises APIs
StarDocs

Cloud-hosted and On-Premises REST-based document-processing and document-viewing APIs

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2017 Gnostice Information Technologies Private Limited. All rights reserved.