Watermark PNG using JavaScript

Watermark PNG image. Stamp a PNG with the text.


Add text watermark to PNG image easily with Watermark PNG JS module.

Try for FREE

ConvertAPI JavaScript library install

ConvertAPI provides a JavaScript module that allows you to perform a Watermark PNG conversion with just a few lines of code. First, install the convertapi-js@~1.1 package from npm:

NPM package >
npm i convertapi-js@~1.1

If you are interested in our old version of non-module JavaScript library you can find it here.

Authenticate your JavaScript library

Next, obtain your secret key by signing up for a free account. Once you sign up, you'll receive 250 free conversions instantly! Grab your authentication secret from the account dashboard, and authenticate the ConvertAPI JavaScript library like this:

import ConvertApi from 'convertapi-js'
let convertApi = ConvertApi.auth('your-api-secret')

Watermark PNG using JavaScript in no time!

Once you have your authentication in place, simply copy-paste this png to watermark conversion code snippet into your JavaScript project. Watermark PNG documents using JavaScript with no effort at all!

// Code snippet is using the ConvertAPI JavaScript Client: https://github.com/ConvertAPI/convertapi-js

// Code snippet is using the ConvertAPI Node.js Client: https://github.com/ConvertAPI/convertapi-nodejs

// Code snippet is using the ConvertAPI PHP Client: https://github.com/ConvertAPI/convertapi-php

// Code snippet is using the ConvertAPI Java Client: https://github.com/ConvertAPI/convertapi-java

// Code snippet is using the ConvertAPI C# Client: https://github.com/ConvertAPI/convertapi-dotnet

# Code snippet is using the ConvertAPI Ruby Client: https://github.com/ConvertAPI/convertapi-ruby

# Code snippet is using the ConvertAPI Python Client: https://github.com/ConvertAPI/convertapi-python

// Code snippet is using the ConvertAPI Go Client: https://github.com/ConvertAPI/convertapi-go

REM Code snippet is using the command line utility program: https://github.com/ConvertAPI/convertapi-cli

<!-- For conversions with the multiple file result please refer to this example: https://repl.it/@ConvertAPI/HTML-Form-with-multiple-file-result -->

Upload the file and see how it works

You can set up the advanced conversion parameters and test the conversion result online using our interactive demo tool. It will auto-generate the code snippet for you!

Advanced Watermark PNG conversion parameters

Text String

Specifies the text to use as watermark. The list of supported variables:

  • %PAGE% - current page number
  • %PAGES% - total number of pages
  • %FILENAME% - name of the file
  • %WEEKDAY% - full weekday name
  • %WEEKDAY_SHORT% - abbreviated weekday name
  • %MONTH% - month number (1-12)
  • %MONTHNAME% - full month name
  • %MONTHNAME_SHORT% - abbreviated month name
  • %YEAR% - year with century (YYYY)
  • %YEAR_SHORT% - year without century (YY)
  • %DAY% - day of month
  • %DAY_YEAR% - day of the year (1 -366)
  • %HOUR% - hour (01- 12)
  • %HOURS% - hour (00-23)
  • %MINUTES% - minutes (00-59)
  • %SECONDS% - seconds (00-59)
  • %AMPM% - AM PM
  • %DATE% - local date representation
  • %TIME% - local time representation
  • %DATETIME% - local date and time
  • %AUTHOR% - document Author
  • %TITLE% - document Title
  • %SUBJECT% - document Subject
  • %KEYWORDS% - document Keywords
FontName Collection

Specifies the watermark font name. Contact us if you are looking for a specific font for a watermark that is missing from the list.

Values:   Arial Bahnschrift Calibri Cambria Consolas Constantia Courier New Georgia Tahoma Times New Roman Verdana

FontSize Integer

Specifies the watermark font size.

FontColor String

Specifies the watermark font color.

StrokeColor String

Specifies font stroke color.

StrokeWidth Integer

Specifies the stroke width.

FontEmbed Bool

Specifies whether fonts should be embedded.

FontSubset Bool

Specifies whether fonts should be subset.

FontEncoding String

Specifies the font encoding.

TextRenderingMode Collection

Specifies the text rendering mode.

Values:   filltext stroketext fillstroke invisible

Rotate Integer

Specifies the watermark rotation angle in degrees.

HorizontalAlignment Collection

Specifies the horizontal watermark alignment.

Values:   left center right

VerticalAlignment Collection

Specifies the vertical watermark alignment.

Values:   top center bottom

PositionX Integer

Specifies the watermark X coordinate. If set overrides property HorizontalAlignment.

PositionY Integer

Specifies the watermark Y coordinate. If set overrides property VerticalAlignment.

PositionUnit Collection

Specifies measurement unit to use for the PositionX and PositionY properties.

Values:   pt in mm cm

Opacity Integer

Specifies watermark opacity level.

Try Watermark PNG for free!