Add watermark

Integrate the Visual PDF API into your solution to easily add a watermark to your PDFs. Follow this guide to learn how to use this tool and integrate it in just a few minutes.

Basic watermark addition

The add watermark tool is very similar to the add signature tool. You will therefore find a lot of common points between these two tools.

To add watermarks with the Visual PDF API, use a watermark task in a file processing pipeline.

    
      // Creating the form data for the pipeline
      const form = new FormData();

      // Adding the PDF to add the watermark to
      form.append('file-1', myFile);

      // Adding the watermark image (my company logo)
      form.append('company-logo', companyLogo);

      // Inserting the watermark on the PDF
      form.append(
        'tasks',
        [
          {
            tool: 'watermark',
            options: {
              watermarks: [
                {
                  // Inserting the watermark at the middle of the pages
                  // with a maximum width of 150 and maximum height of 100
                  box: [50w, 50h, 150, 100],
                  // Indicate which file is to be used for watermark
                  file: 'company-logo',
                  pages: ['all'],
                },
              ],
            },
          },
        ],
      );
    
  

Adding a text watermark

If adding an image watermark can be useful to add your company logo for example, it can also be interesting to add textual watermarks to add an emmention to your documents (for example "confidential", "supplier copy ", "private document", etc.).

Let's see how we can add this type of watermark:

    
      options: {
        watermarks: [
          {
            box: [50w, 50h, 100w, 100w],
            // Adding a red "confidential" watermark
            text: 'confidential',
            color: '#ff0000',
            font: 'special-elite',
            rotation: -45,
            opacity: 0.5,
            pages: ['all'],
          },
        ],
      }
    
  

Adding multiple watermarks

You can insert as many watermarks as needed on a PDF.

To achieve this, you will need to add all the necessary watermark images, and add several instructions in the watermarks option:

    
      // Creating the form data for the pipeline
      const form = new FormData();

      // Adding the PDF to add the watermarks to
      form.append('file-1', myFile);

      // Adding the watermark image (my company logo)
      form.append('company-logo', companyLogo);

      // Inserting the watermarks on the PDF
      form.append(
        'tasks',
        [
          {
            tool: 'watermark',
            options: {
              watermarks: [
                {
                  // Inserting the watermark at the middle of the pages
                  // with a maximum width of 150 and maximum height of 100
                  box: [50w, 50h, 150, 100],
                  // Indicate which file is to be used for watermark
                  file: 'company-logo',
                  pages: ['all'],
                },
                {
                  box: [50w, 50h, 100w, 100w],
                  // Adding a red "confidential" watermark
                  text: 'confidential',
                  color: '#ff0000',
                  font: 'special-elite',
                  rotation: -45,
                  opacity: 0.5,
                  pages: ['all'],
                },
              ],
            },
          },
        ],
      );
    
  

Watermarks are added in the order of the instructions. If several overlap, the last one added will therefore be in the foreground.

Watermark settings

Depending on the method used to add a watermark, you have different options to customize its position and appearance.

Let's go through the list of these options and the possible values for each of them.

Box

This is a rectangle in which the watermark will be included. It will not be visible on the PDF, but allows you to indicate the position, maximum width and maximum height of the watermark. Depending on the shape of the watermark, it will occupy the entire width or the entire height of this rectangle.

It is represented by an array in the format [x, y, width, height] and can be expressed in relative or absolute values.

The x and y parameters represent the coordinates of the center of the box. This way, if you rotate the watermark, this coordinate will always be the center of the watermark.

Opacity

This option allows you to adjust the transparency of the watermark, and must be a value between 0 and 1 (0 being full transparency, and 1 being full opacity).

By default a watermark will have an opacity of 1.

Rotation

This parameter allows you to rotate a watermark, with the angle of your choice, expressed in degrees.

The origin of the rotation is the center of the watermark.

    
      options: {
        watermarks: [
          {
            box: [10, 10, 200, 100],
            file: 'company-logo',
            pages: ['last'],
            // Rotate the watermark 90 degrees
            rotation: 90,
          },
        ],
      }
    
  

Text options

When you add a watermark in text format, you can configure its appearance via various options:

• color: the color of the text
• font: the font of the text, among those available