Watermark

Add specific text or patterns to the page.

When to use

Use when the page needs to be watermarked to identify the copyright.
Suitable for preventing information theft.

Examples

Basic

The most basic usage.

Multi-line watermark

Use content to set an array of strings and WatermarkText to specify multi-line text watermark content with custom font styles per line.

Image watermark

Specify the image address via image. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.

Custom configuration

Preview the watermark effect by configuring custom parameters.

Modal or Drawer

Use in Modal and Drawer.

API

Watermark are exported from @ceebee/ui/client.

Watermark

Property	Description	Type	Default	Version
`width`	The width of the watermark, the default value of content is its own width	`number`	`120`	—
`height`	The height of the watermark, the default value of content is its own height	`number`	`64`	—
`inherit`	Pass the watermark to the pop-up component such as Modal, Drawer	`boolean`	`true`	5.11.0
`rotate`	When the watermark is drawn, the rotation Angle, unit °	`number`	`-22`	—
`zIndex`	The z-index of the appended watermark element	`number`	`999`	—
`image`	Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)	`string`	`-`	—
`content`	Watermark text content	`string \| WatermarkText \| (string \| WatermarkText)[]`	`-`	WatermarkText: 6.5.0
`font`	Text style	`Font`	`Font`	—
`gap`	The spacing between watermarks	`\[number, number\]`	`\[100, 100\]`	—
`offset`	The offset of the watermark from the upper left corner of the container. The default is gap/2	`\[number, number\]`	`\[gap\[0\]/2, gap\[1\]/2\]`	—
`onRemove`	Callback when the watermark is removed by DOM mutation	`() => void`	`-`	6.0.0

WatermarkText

Property	Description	Type	Default	Version
`font`	Custom line text style	`Font`	`-`	6.5.0
`text`	Line text	`string`	`-`	6.5.0

Font

Property	Description	Type	Default	Version
`color`	font color	`CanvasFillStrokeStyles.fillStyle`	`rgba(0,0,0,.15)`	—
`fontSize`	font size	`number`	`16`	—
`fontWeight`	font weight	`normal \| lighter \| bold \| bolder \| number`	`normal`	—
`fontFamily`	font family	`string`	`sans-serif`	—
`fontStyle`	font style	`none \| normal \| italic \| oblique`	`normal`	—
`textAlign`	specify the text alignment direction	`CanvasTextAlign`	`center`	5.10.0