@slaykit/watermark v0.0.1

🔥 Watermark Plugin

A lightweight and customizable JavaScript class for generating watermarks on a canvas element. The plugin supports both text and image-based watermarks with configurable options.

✨ Features

• Generate watermarks using either text or images.
• Highly customizable options, including font, color, spacing, size, and rotation.
• Supports high-definition displays with device pixel ratio adjustment.
• Works in modern browsers with canvas support.

📦 Installation

Install the plugin via npm or yarn or pnpm:

# Using npm
npm install @slaykit/watermark --save-dev

# Using yarn
yarn add @slaykit/watermark --dev

# Using pnpm
pnpm add @slaykit/watermark --save-dev

🚀 Usage

Example: Text-based Watermark

const options = {
  content: 'SlayKit',
  fontSize: 20,
  fontColor: 'rgba(0, 0, 0, 0.1)',
  rotate: -30,
};

const watermark = new Watermark(options);
watermark.create().then((dataURL) => {
  document.body.style.backgroundImage = `url(${dataURL})`;
});

Example: Image-based Watermark

const options = {
  image: 'https://xulai.me/favicon.svg',
  width: 150,
  height: 100,
  gapX: 300,
  gapY: 200,
};

const watermark = new Watermark(options);
watermark.create().then((dataURL) => {
  document.body.style.backgroundImage = `url(${dataURL})`;
});

⚙️ API Reference

WatermarkOptions

贡献

如果你有任何改进建议或发现了问题，欢迎通过 GitHub Issues 向我们反馈，或者提交 Pull Request。