Watermark

Watermark adds watermark effects to pages.

Setup

1. Install the plugin

NPM

$ npm add @winner-fed/plugin-watermark -D

YARN

$ yarn add @winner-fed/plugin-watermark -D

PNPM

$ pnpm add @winner-fed/plugin-watermark -D

BUN

$ bun add @winner-fed/plugin-watermark -D

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: ['@winner-fed/plugin-watermark'],
  /**
   * @name Watermark plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/watermark.html
   */
  watermark: {},
});

3. Import and use in your project

import { Watermark, WatermarkOptions } from 'winjs';

const watermark = new Watermark({
  container: document.body,
  text: 'Test Watermark',
} as WatermarkOptions);

watermark.show();

API

Basic Parameters

Parameter	Description	Type	Default
container	Watermark mount node	HTMLElement | string	-
image	Image source, recommend exporting 2x or 3x images, image rendering takes priority	string	-
text	Watermark text, array indicates multi-line watermark	string | string\[\]	-
zIndex	Watermark z-index	number	9999
width	Single watermark width	number	120
height	Single watermark height	number	64
opacity	Watermark opacity	number	0.15
rotate	Rotation angle	number	-22
fontSize	Font size	number	16
fontWeight	Font weight	number | string	normal
fontStyle	Font style	string	normal
fontVariant	Font variant	string	normal
fontColor	Font color	string	#000
fontFamily	Watermark text font family	string	sans-serif
blindText	Blind watermark text	string	-
blindOpacity	Blind watermark opacity	number	0.005

Advanced Parameters

Parameter	Description	Type	Default
monitor	Whether to enable protection mode	boolean	true
mode	Display mode, interval means staggered display	string	interval
gapX	Horizontal spacing between watermarks	number	100
gapY	Vertical spacing between watermarks	number	100
offsetLeft	Horizontal offset for watermark drawing on canvas	number	0
offsetTop	Vertical offset for watermark drawing on canvas	number	0
pack	Whether to use watermark component to wrap content	boolean	true

Methods

Name	Description	Type
update	Update watermark configuration and re-render	(opts: WatermarkOptions) => void
show	Show watermark	() => void
hide	Hide watermark	() => void
destroy	Destroy watermark	() => void