https://github.com/acrodata/watermark
🛡 Add watermark to your page
https://github.com/acrodata/watermark
angular blind-watermark image-watermark ngx-watermark text-watermark watermark
Last synced: 8 days ago
JSON representation
🛡 Add watermark to your page
- Host: GitHub
- URL: https://github.com/acrodata/watermark
- Owner: acrodata
- License: mit
- Created: 2024-09-29T07:06:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-16T15:43:16.000Z (5 months ago)
- Last Synced: 2025-03-28T09:08:53.838Z (25 days ago)
- Topics: angular, blind-watermark, image-watermark, ngx-watermark, text-watermark, watermark
- Language: TypeScript
- Homepage: https://acrodata.github.io/watermark/
- Size: 1.53 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Watermark
[](https://www.npmjs.com/package/@acrodata/watermark)
[](https://github.com/acrodata/watermark/blob/main/LICENSE)
Add watermark to your page.
#### Quick links
[Documentation](https://github.com/acrodata/watermark?tab=readme-ov-file#watermark) |
[Playground](https://acrodata.github.io/watermark/)
## Installation
```bash
npm install @acrodata/watermark --save
```
## Usage
```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
### 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