Add watermark to your page
npm install @acrodata/watermark
Add watermark to your page.
#### Quick links
``bash`
npm install @acrodata/watermark --save
`ts
import { Component } from '@angular/core';
import { WatermarkDirective, WatermarkOptions } from '@acrodata/watermark';
@Component({
selector: 'your-app',
template:
...
,
standalone: true,
imports: [WatermarkDirective],
})
export class YourAppComponent {
options: WatermarkOptions = {
text: '...',
};
}
`API
$3
| 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'] |$3
| 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