Add Watermark to PDF using JavaScript

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: SecurityLive demo

Adding text or an image as a watermark on top of a document requires only a few lines of code using the setWatermark method of DocumentViewer. This method allows you to pass an options object to draw text on top of the document or pass a custom function which will be executed with a reference to the page canvas.

Draw text as watermark

To draw a watermark, use documentViewer.setWatermark and pass an options object as shown below.

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement)
  .then(instance => {
    const { documentViewer } = instance.Core;

    documentViewer.setWatermark({
      // Draw diagonal watermark in middle of the document
      diagonal: {
        fontSize: 25, // or even smaller size
        fontFamily: 'sans-serif',
        color: 'red',
        opacity: 50, // from 0 to 100
        text: 'Watermark'
      },

      // Draw header watermark
      header: {
        fontSize: 10,
        fontFamily: 'sans-serif',
        color: 'red',
        opacity: 70,
        left: 'left watermark',
        center: 'center watermark',
        right: ''
      }
    });
  });

WebViewerInstance DocumentViewer.setWaterMark

JavaScript (SDK v6.0+)

WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.setWatermark({
      // Draw diagonal watermark in middle of the document
      diagonal: {
        fontSize: 25, // or even smaller size
        fontFamily: 'sans-serif',
        color: 'red',
        opacity: 50, // from 0 to 100
        text: 'Watermark'
      },
      // Draw header watermark
      header: {
        fontSize: 10,
        fontFamily: 'sans-serif',
        color: 'red',
        opacity: 70,
        left: 'left watermark',
        center: 'center watermark',
        right: ''
      }
    });
  });

WebViewerInstance DocumentViewer.setWaterMark

Draw custom content as watermark

The setWatermark method also allows you to draw custom content on the page. To do this, pass a custom function to the API as a part of the options object.

For the following sample, we will use a Promise which will resolve with the watermark options object. If the document hasn't been loaded yet then DocumentViewer will wait to finish loading it until the watermark options are ready.

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement)
  .then(instance => {
    const { documentViewer } = instance.Core;
    const path = '/samples/full-apis/TestFiles/butterfly.png'
    // Promise resolves with options object
    const promise = new Promise(resolve => {
      const img = new Image();
      const options = {
        footer: {
          fontSize: 15,
          fontFamily: 'sans-serif',
          color: 'red',
          opacity: 70,
          left: 'left watermark',
          center: 'center watermark'
        },
        custom: (ctx, pageNumber, pageWidth, pageHeight) => {
          // the pageNumber is also passed in so you could have
          // a different watermark for each page
          ctx.drawImage(
            img,
            pageWidth / 2 - img.width / 2,
            pageHeight / 2 - img.height / 2
          );
        }
      };
      img.onload = () => { 
        return resolve(options);
      };
      img.src = path;
    });
    documentViewer.setWatermark(promise);
  });

WebViewerInstance DocumentViewer.setWaterMark

JavaScript (SDK v7.0+)

WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement)
  .then(instance => {
    const { docViewer } = instance;
    const path = '/samples/full-apis/TestFiles/butterfly.png'
    // Promise resolves with options object
    const promise = new Promise(resolve => {
      const img = new Image();
      const options = {
        footer: {
          fontSize: 15,
          fontFamily: 'sans-serif',
          color: 'red',
          opacity: 70,
          left: 'left watermark',
          center: 'center watermark'
        },
        custom: (ctx, pageNumber, pageWidth, pageHeight) => {
          // the pageNumber is also passed in so you could have
          // a different watermark for each page
          ctx.drawImage(
            img,
            pageWidth / 2 - img.width / 2,
            pageHeight / 2 - img.height / 2
          );
        }
      };
      img.onload = () => { 
        return resolve(options);
      };
      img.src = path;
    });
    docViewer.setWatermark(promise);
  });

WebViewerInstance DocumentViewer.setWaterMark

JavaScript (SDK v6.0+)

WebViewer({
  initialDoc: 'https://url/to/my_file.docx',
  // ...
}, viewerElement)
  .then(instance => {
    const { docViewer } = instance;
    const path = '/samples/full-apis/TestFiles/butterfly.png'
    // Promise resolves with options object
    const promise = new Promise(resolve => {
      const img = new Image();
      const options = {
        footer: {
          fontSize: 15,
          fontFamily: 'sans-serif',
          color: 'red',
          opacity: 70,
          left: 'left watermark',
          center: 'center watermark'
        },
        custom: (ctx, pageIndex, pageWidth, pageHeight) => {
          // the pageIndex is also passed in so you could have
          // a different watermark for each page
          ctx.drawImage(
            img,
            pageWidth / 2 - img.width / 2,
            pageHeight / 2 - img.height / 2
          );
        }
      };
      img.onload = () => { 
        return resolve(options);
      };
      img.src = path;
    });
    docViewer.setWatermark(promise);
  });

WebViewerInstance DocumentViewer.setWaterMark

Draw watermark text in custom positions

The setWatermarkcustom argument can also be used to draw text in custom positions.

JavaScript (SDK v8.0+)

WebViewer({
  // ...
}, viewerElement)
  .then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.setWatermark({
      custom: (ctx, pageNumber, pageWidth, pageHeight) => {
        // ctx is an instance of CanvasRenderingContext2D
        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
        // Hence being able to leverage those properties
        ctx.fillStyle = '#ff0000';
        ctx.font = '20pt Arial';
        ctx.globalAlpha = 0.4;
    
        ctx.save();
        ctx.translate(0, pageHeight / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('left side watermark', 0, 0);
        ctx.restore();
    
        ctx.save();
        ctx.translate(pageWidth, pageHeight / 2);
        ctx.rotate(Math.PI / 2);
        ctx.fillText('right side watermark', 0, 0);
        ctx.restore();
      },
    });
  });

WebViewerInstance DocumentViewer.setWaterMark

JavaScript (SDK v7.0+)

WebViewer({
  // ...
}, viewerElement)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.setWatermark({
      custom: (ctx, pageNumber, pageWidth, pageHeight) => {
        // ctx is an instance of CanvasRenderingContext2D
        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
        // Hence being able to leverage those properties
        ctx.fillStyle = '#ff0000';
        ctx.font = '20pt Arial';
        ctx.globalAlpha = 0.4;
    
        ctx.save();
        ctx.translate(0, pageHeight / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('left side watermark', 0, 0);
        ctx.restore();
    
        ctx.save();
        ctx.translate(pageWidth, pageHeight / 2);
        ctx.rotate(Math.PI / 2);
        ctx.fillText('right side watermark', 0, 0);
        ctx.restore();
      },
    });
  });

WebViewerInstance DocumentViewer.setWaterMark

JavaScript (SDK v6.0+)

WebViewer({
  // ...
}, viewerElement)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.setWatermark({
      custom: (ctx, pageIndex, pageWidth, pageHeight) => {
        // ctx is an instance of CanvasRenderingContext2D
        // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
        // Hence being able to leverage those properties
        ctx.fillStyle = '#ff0000';
        ctx.font = '20pt Arial';
        ctx.globalAlpha = 0.4;
    
        ctx.save();
        ctx.translate(0, pageHeight / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('left side watermark', 0, 0);
        ctx.restore();
    
        ctx.save();
        ctx.translate(pageWidth, pageHeight / 2);
        ctx.rotate(Math.PI / 2);
        ctx.fillText('right side watermark', 0, 0);
        ctx.restore();
      },
    });
  });

WebViewerInstance DocumentViewer.setWaterMark

Draw watermark without DocumentViewer

If you're constructing your own Document instance then it also provides a setWatermark method.

JavaScript (SDK v8.0+)

const filePath = '/webviewer-demo.pdf';
const watermarkOptions = {
 header: {
     fontSize: 15,
     color: 'blue',
     center: 'center watermark',
 },
 diagonal: {
     fontSize: 30,
     fontFamily: 'sans-serif',
     color: 'red',
     opacity: 100,
     text: 'Watermark'
 }
};
const doc = await Core.createDocument(filePath, { l: 'YOUR_LICENSE_KEY'});
// Set watermark options object
doc.setWatermark(watermarkOptions);
// Draw canvas
doc.loadCanvasAsync({
 pageIndex: 0,
 getZoom: () =>  0.8,  // 80% zoom,
 drawComplete: pageCanvas => {
   // Append canvas to dom to see the result
   document.body.appendChild(pageCanvas);
 },
});

Core.createDocument Core.Document.setWaterMark Core.Document.loadCanvasAsync

JavaScript (SDK v6.0+)

const filePath = '/webviewer-demo.pdf';
const watermarkOptions = {
 header: {
     fontSize: 15,
     color: 'blue',
     center: 'center watermark',
 },
 diagonal: {
     fontSize: 30,
     fontFamily: 'sans-serif',
     color: 'red',
     opacity: 100,
     text: 'Watermark'
 }
};
const doc = await CoreControls.createDocument(filePath, { l: 'YOUR_LICENSE_KEY'});
// Set watermark options object
doc.setWatermark(watermarkOptions);
// Draw canvas
doc.loadCanvasAsync({
 pageIndex: 0,
 getZoom: () =>  0.8,  // 80% zoom,
 drawComplete: pageCanvas => {
   // Append canvas to dom to see the result
   document.body.appendChild(pageCanvas);
 },
});

CoreControls.createDocument CoreControls.Document.setWaterMark CoreControls.Document.loadCanvasAsync

Draw watermark dynamically

If you want to add a watermark or modify the existing watermark after pages are rendered, then after calling setWatermark you will also need to call the refreshAll and the updateView methods of DocumentViewer.

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;
    const watermarkOptions = {...};
    documentViewer.setWatermark(watermarkOptions);
    documentViewer.refreshAll();
    documentViewer.updateView();
  })

WebViewerInstance DocumentViewer.setWaterMark DocumentViewer.refreshAll DocumentViewer.updateView

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    const watermarkOptions = {...};
    docViewer.setWatermark(watermarkOptions);
    docViewer.refreshAll();
    docViewer.updateView();
  })

WebViewerInstance DocumentViewer.setWatermark DocumentViewer.refreshAll DocumentViewer.updateView

If you are going to use a Promise then you need to call those two methods after the Promise has resolved:

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;
    const promise = new Promise(resolve => {
      // some asynchronous operations to generate the watermark options object
      resolve(watermarkOptions);
    });
    documentViewer.setWatermark(promise);
    documentViewer.getWatermark().then(() => {
      documentViewer.refreshAll();
      documentViewer.updateView();
    })
  })

WebViewerInstance DocumentViewer.setWaterMark DocumentViewer.refreshAll DocumentViewer.updateView

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    const promise = new Promise(resolve => {
      // some asynchronous operations to generate the watermark options object
      resolve(watermarkOptions);
    });
    docViewer.setWatermark(promise);
    docViewer.getWatermark().then(() => {
      docViewer.refreshAll();
      docViewer.updateView();
    })
  })

WebViewerInstance DocumentViewer.setWaterMark DocumentViewer.refreshAll DocumentViewer.updateView

Adjust Watermark Quality

The WebViewer SDK includes a setWatermarkRenderQuality(multiplier) API to provide finer control over how watermarks are rendered when using the setWatermark API. This can be useful when downloading or printing using embedded printing, where rasterization artifacts can occur.

This API allows you to adjust the rasterization multiplier used during watermark rendering. By increasing the multiplier, you can enhance the output quality of the watermark, which can reduce pixelation or blurriness.

You can call this API from either the DocumentViewer or Document namespaces. To apply the quality setting globally to all documents in your app, call it from the DocumentViewer. If you only want to apply it to a specific document, call it directly on that document instance.

JavaScript

// Calling from Document Viewer
await instance.Core.documentViewer.setWatermarkRenderQuality(4);

// Calling from a Document
const documentViewer = instance.Core.documentViewer;
const doc = documentViewer.getDocument();
await doc.setWatermarkRenderQuality(3);

DocumentViewer.setWatermarkRenderQuality Document.setWatermarkRenderQuality