watermark-lite

💻 A lightweight watermark plugin

Xiaohe / github@xiaohe0601 / gitee@xiaohe0601

🎉 Features

• 🪶 Lightweight and easy-to-use API design

• 🖌️ Rich customization options

• 🔐 Monitors DOM behavior and automatically rebuilds the watermark

• 🧀 Full support for TypeScript

• 👌 No framework restrictions

🚁 Installation

PNPM

pnpm add watermark-lite

YARN

yarn add watermark-lite

NPM

npm install watermark-lite

🛹 Usage

Basic Usage

import { Watermark } from "watermark-lite";

const wm = new Watermark();

// Display the watermark
wm.mount({
  text: "watermark text"
});

// To modify the watermark text or style, just call the `mount` method again
wm.mount({
  text: "modified watermark text"
});

// Remove the watermark
wm.unmount();

Default Instance

Since version 0.0.7, you can directly use the exported default instance

import { watermark } from "watermark-lite";

watermark.mount({
  text: "watermark text"
});

You can also use the alias wm for watermark

import { wm } from "watermark-lite";

wm.mount({
  text: "watermark text"
});

Custom Watermark Style

wm.mount({
  text: "watermark text",
  fontSize: "14px",
  fontFamily: "inherit",
  color: "#000000",
  opacity: 0.15,
  rotate: 15
});

Custom Watermark Parent Element

By default, the watermark is mounted under document.body. You can change the parent element using the parentEl parameter, which supports passing in an element id or HTMLElement

wm.mount({
  text: "watermark text",
  parentEl: "app"
});

About Single-Page Applications

For single-page applications, make sure to call the unmount method at the appropriate time to avoid repeated listeners and potential memory leaks

// The following is an example using Vue3, but the plugin itself is not limited to any framework

import { onBeforeUnmount, onMounted } from "vue";
import { Watermark } from "watermark-lite";

const wm = new Watermark();

onMounted(() => {
  wm.mount({
    text: "watermark text"
  });
});

onBeforeUnmount(() => {
  wm.unmount();
});

Configuration Options

Parameter	Description	Type	Default
el	watermark element id	string	watermark
text	watermark text	string	default watermark
x	watermark starting x-coordinate (px)	number	0
y	watermark starting y-coordinate (px)	number	0
rows	number of watermark rows	number	auto-calculated
cols	number of watermark columns	number	auto-calculated
xGap	watermark x-axis spacing (px)	number	50
yGap	watermark y-axis spacing (px)	number	50
zIndex	z-index of the watermark	number / string	99999
itemIdPrefix	prefix for watermark item ids	string	watermark-item
itemWidth	width of the watermark item (px)	number	100
itemHeight	height of the watermark item (px)	number	100
fontSize	watermark font size	string	14px
fontFamily	watermark font	string	inherit
color	watermark text color	string	#000000
opacity	watermark opacity (range: 0 ~ 1)	number	0.15
rotate 0.1.0	watermark rotate (range: 0 ~ 360)	number	15
parentEl	parent element for watermark	string / HTMLElement	document.body
monitor	monitor watermark changes and automatically rebuild	boolean	true
angle 0.1.0 removed	watermark rotate (range: 0 ~ 360) (removed in 0.1.0, use rotate instead)	number	15

Type Definitions

See jsdocs.io

🐶 Discussion & Communication

• ❓：For questions or bug feedback, you can submit an issues and PRs are welcome~
• 📫：[e-mail]
• 🐧：Not yet available

🏆 License

• MIT LICENSE