English | 简体中文

✨ Features

• Canvas-based Rendering: Utilizes HTML5 canvas to generate clear and efficient watermarks.
• Dynamic Regeneration: Automatically restores the watermark if it's removed or changed.
• Lightweight and Easy to Use: Minimal setup and seamless integration into any project.
• No Dependencies: Completely independent, does not rely on external libraries.
• Fully Customizable: Fine-tune text, size, rotation, color, opacity, and positioning to meet your needs.

✨ Configuration

| Parameter | Default Value | Required | Description | | --------- | -------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | container | document.body | Yes | The container element to which the watermark will be attached. Typically used to specify the area where the watermark should be displayed | | width | 250 | No | Width of the watermark (in pixels) | | height | 150 | No | Height of the watermark (in pixels) | | fontSize | 20 | No | Font size of the watermark text (in pixels) | | font | "microsoft yahei" | No | Font of the watermark text | | color | "#cccccc" | No | Color of the watermark text, default is light gray | | content | "watermark" | No | The text content of the watermark | | rotate | -30 | No | Rotation angle of the watermark (in degrees) | | zIndex | 1000 | No | z-index of the watermark container, used to control its layer in the stacking context | | opacity | 0.5 | No | Opacity of the watermark, ranging from 0 (completely transparent) to 1 (completely opaque) | | x | null (default is centered) | No | The starting X coordinate for the watermark text. If null, the default is width / 2 | | y | null (default is centered) | No | The starting Y coordinate for the watermark text. If null, the default is height / 2 |

✨ Usage

① Direct Usage

• Include the file

<script src="../dist/main.js"></script>

• Create a DOM element

<div id="water-mark" class="water-mark"></div>

• Initialize the watermark

const watermark = new ihmWaterMark({
  container: document.getElementById("water-mark"),
});

watermark.output();

② Using as an npm package

• Install the dependency package

# npm
npm install ihm-watermark
# yarn
yarn add ihm-watermark

• Import the package

import ihmWaterMark from "ihm-watermark";

• Initialize the watermark

const watermark = new ihmWaterMark({
  container: document.getElementById("water-mark"),
});

watermark.output();

✨ Development

1. Clone the repository

git clone https://github.com/InhamiRei/ihm-WaterMark.git
cd ihm-WaterMark/

2. Install dependencies

yarn

3. demo.html is an example file that can be run directly to view the effects.

4. After modifying the code, build the package

yarn build

✨ Pictures