Watermark

Add watermark to your page.

Quick links

Documentation | Playground

Installation

npm install @acrodata/watermark --save

Usage

import { Component } from '@angular/core';
import { WatermarkDirective, WatermarkOptions } from '@acrodata/watermark';

@Component({
  selector: 'your-app',
  template: `
    <div watermark [watermarkOptions]="options">
      <p>...</p>
    </div>
  `,
  standalone: true,
  imports: [WatermarkDirective],
})
export class YourAppComponent {
  options: WatermarkOptions = {
    text: '...',
  };
}

API

Inputs

Name	Type	Default	Description
[options]	WatermarkOptions	{}	See WatermarkOptions
[container]	HTMLElement | string | null	undefined	See WatermarkOptions['container']
[secure]	boolean	true	See WatermarkOptions['secure']
[zIndex]	number	9999	See WatermarkOptions['zIndex']
[scrollHeight]	string |number	undefined	See WatermarkOptions['scrollHeight']

WatermarkOptions

Name	Type	Default	Description
container	HTMLElement | string | null	undefined	Container of the watermark
secure	boolean	true	Whether prevent the watermark being removed
image	string	undefined	Image source of the watermark, it's recommended to use 2x or 3x image
text	string | string[]	undefined	Text of the watermark and dispaly multiple lines with using array
blindText	string	undefined	Text of the blind-watermark
blindFontSize	string | number	16	Font size of the blind-watermark
blindOpacity	boolean	0.005	Opacity of the blind-watermark
repeat	'none' | 'normal' | 'multiply'	multiply	Specify how watermarks are repeated
position	string	undefined	Specify background-position of the watermark
zIndex	number	9999	Specify z-index of the watermark
scrollHeight	number | string	undefined	Specify the height of watermark in a scroll container
gapX	number	100	Horizontal gap of watermark contents
gapY	number	100	Vertical gap of watermark contents
offsetX	number	0	Horizontal offset of the watermark content
offsetY	number	0	Vertical offset of the watermark content
width	number	120	Width of the watermark content
height	number	60	Height of the watermark content
opacity	number	0.15	Opacity of the watermark
rotate	number	-24	Rotation degree of the watermark content
fontSize	number	16	Font size of the text-watermark
fontWeight	string | number	400	Font weight of the text-watermark
fontStyle	'normal' | 'italic'	normal	Font style of the text-watermark
fontVariant	'normal' | 'small-caps	normal	Font variant of the text-watermark
fontColor	string	#000	Font color of the text-watermark
fontFamily	string	sans-serif	Font family of the text-watermark
textAlign	CanvasTextAlign	center	Text alignment of the text-watermark
textBaseline	CanvasTextBaseline	alphabetic	Text alignment of the text-watermark

License

MIT