Add watermark to your page.
npm install @acrodata/watermark --save
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: '...',
};
}
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']
|
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 |
MIT