https://github.com/pansyjs/watermark
🛡 强大的水印组件，助你快速的给网页添加水印。
https://github.com/pansyjs/watermark
component react react-component typescript vue vue-component watermark
Last synced: 5 months ago
JSON representation
🛡 强大的水印组件，助你快速的给网页添加水印。
- Host: GitHub
- URL: https://github.com/pansyjs/watermark
- Owner: pansyjs
- License: mit
- Created: 2020-11-02T15:01:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-04-24T10:47:56.000Z (6 months ago)
- Last Synced: 2025-04-24T11:35:42.579Z (6 months ago)
- Topics: component, react, react-component, typescript, vue, vue-component, watermark
- Language: TypeScript
- Homepage: https://watermark.xingkang.wang
- Size: 20.2 MB
- Stars: 386
- Watchers: 3
- Forks: 47
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Pansy Watermark
强大的水印组件，助你快速的给网页添加水印。
[![npm version][npm-v-image]][npm-url]
[![npm download][download-image]][download-url]
[![stars-image][stars-image]][stars-url]
[![forks-image][forks-image]][forks-url]
[![packagephobia][packagephobia-image]][packagephobia-url]
## ✨ 特性
- 🌴 支持一个页面添加多处不同水印
- 🌵 支持使用图片、单行文本、多行文本作为水印
- 🐠 支持自定义水印样式，开箱即用
- 🌈 安全防御 - 防止他人删除水印dom或修改样式属性
- 💻 使用 TypeScript 编写，提供完善的类型定义
## 🏗 安装
```
// npm
npm install @pansy/watermark --save
// yarn
yarn add @pansy/watermark
```
## 🚄 示例
[Demo](https://watermark-eosin.vercel.app/)
## 🚗 框架封装
|框架|版本|
|--|--|
|React| [![npm version][npm-react-v-image]][npm-react-url] |
|Vue| [![npm version][npm-vue-v-image]][npm-vue-url] |
## 🔨 使用
```ts
import { Watermark } from '@pansy/watermark';
const watermark = new Watermark({ ... });
// 如果需要修改水印参数，请调用
watermark.update({ ... });
// 隐藏水印
watermark.hide();
// 显示水印
watermark.show();
// 销毁水印
watermark.destroy();
```
## ❤️ 感谢
- [watermark-dom](https://github.com/saucxs/watermark-dom)
## 🌟 社区互助
| Github Issue | 钉钉群 | 微信群 |
| ------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [issues](https://github.com/pansyjs/watermark/issues) | 
| 
|
[npm-v-image]: https://img.shields.io/npm/v/@pansy/watermark.svg
[npm-url]: http://npmjs.org/package/@pansy/watermark
[npm-react-v-image]: https://img.shields.io/npm/v/@pansy/react-watermark.svg
[npm-react-url]: http://npmjs.org/package/@pansy/react-watermark
[npm-vue-v-image]: https://img.shields.io/npm/v/@pansy/vue-watermark.svg
[npm-vue-url]: http://npmjs.org/package/@pansy/vue-watermark
[forks-image]: https://img.shields.io/github/forks/pansyjs/watermark.svg
[stars-image]: https://img.shields.io/github/stars/pansyjs/watermark.svg
[packagephobia-image]: https://packagephobia.com/badge?p=@pansy/watermark
[github-url]: https://github.com/pansyjs/watermark
[stars-url]: https://github.com/pansyjs/watermark/stargazers
[forks-url]: https://github.com/pansyjs/watermark/network/members
[packagephobia-url]: https://packagephobia.com/result?p=@pansy/watermark
[download-image]: https://img.shields.io/npm/dm/@pansy/watermark
[download-url]: https://npmjs.org/package/@pansy/watermark