View all our articles

Adding an image watermark in Node with SuperAgent

In this guide, we'll walk you through the process of adding text watermarks to your PDF files, using PDFShift's API.

Adding a watermark to your PDF can be done by adding the watermark object to your query. The advantage of providing an image is that you can add a visual stamp on top of each of your pages that are generated through PDFShift.

const superagent = require('superagent');
const fs = require('fs');

// You can get an API key at https://pdfshift.io
api_key = 'sk_xxxxxxxxxxxx'

params = {
    source: 'https://www.example.com',
    watermark: {
        image: 'https://placekitten.com/200/300',
        offset_x: 'center',
        offset_top: 'top'
    }
}

let response = await superagent
    .post('https://api.pdfshift.io/v3/convert/pdf')
    .auth('api', api_key)
    .send(params);

fs.writeFileSync('result.pdf', response.body);

console.log('The PDF document was generated and saved to result.pdf');

The "image" parameter for the watermark can be used in two different values:

  • URL : A full URL to an image that will be used as the watermark.
  • Base64 : A base64 encoded image that will be used as the watermark.

Note that you can also rotate the image by passing the rotate parameter as a degree (or negative degree)

You can also customize the position of the text watermark by applying the following properties:

  • offset_x: The horizontal position of the text. Can be 'left', 'center', 'right', or a specific value in pixels. Defaults to 'center'.
  • offset_y: The vertical position of the text. Can be 'top', 'middle', 'bottom', or a specific value in pixels. Defaults to 'center'.

For the offset positions, we accept a value in integer which will be translated to pixels, but you can also pass a unit such as 'px', 'in', 'cm', 'mm', 'pt'.

For example:

params = {
    "source": "https://www.example.com",
    "watermark": {
        "text": "PROTECTED DOCUMENT",
        "offset_x": "5cm",
        "offset_top": "15mm"
    }
}

For further details on the watermark property and its usage, please refer to our dedicated documentation.

We hope this guide was helpful. If you have any questions or noticed any issues on the code above,
feel free to drop us a line.