# @zu1662/watermark

> 水印核心功能组件

Latest version **1.1.2** (published 2022-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zu1662/watermark
pnpm add @zu1662/watermark
yarn add @zu1662/watermark
bun add @zu1662/watermark
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-03-09 |
| First published | 2022-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 71 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zu1662 |
| Maintainers | huazite |

## Links

- npm: https://www.npmjs.com/package/@zu1662/watermark
- npm.io page: https://npm.io/package/@zu1662/watermark

## Recent versions

- 1.1.2 (latest) — 2022-03-09
- 1.0.1 — 2022-03-08
- 1.0.0 — 2022-03-08
- 0.0.9 — 2022-03-08

## README

# `@zu1662/watermark`

> 页面水印核心SDK

## 使用

```shell
# npm
npm install @zu1662/watermark

# yarn
yarn add @pansy/watermark
```

```typescript
import { Watermark } from '@zu1662/watermark';

const watermark = new Watermark({ ... });

// 如果需要修改水印参数，请调用
watermark.update({ ... });

// 隐藏水印
watermark.hide();

// 显示水印
watermark.show();

// 销毁水印
watermark.destroy();
```

## API

### 基本参数

|参数|说明|类型|默认值|
|---|---|---|---|
|visible|水印是否显示|`boolean`|`true`|
|useClientHeight|是否使用元素或者父元素的ClientHeight|`boolean`|`false`|
|image|图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印|`string`|-|
|text|水印文本, 为数组时表示多行水印|`string` \| `string[]`|-|
|zIndex|水印层级|`number`|`9999`|
|width|单个水印宽度|`number`|`120`|
|height|单个水印高度|`number`|`64`|
|opacity|水印透明度|`number`|`0.15`|
|rotate|旋转的角度|`number`|`-22`|
|fontSize|设置字体大小|`number`|`16`|
|fontWeight|设置字体粗细|`number` \| `string` |`normal`|
|fontStyle|规定字体样式|`string`|`normal`|
|fontVariant|规定字体变体|`string`|`normal`|
|fontColor|设置字体颜色|`string`|`#000`|
|fontFamily|设置水印文字的字体|`string`|`sans-serif`|

### 高级参数

|参数|说明|类型|默认值|
|---|---|---|---|
|monitor|是否开启保护模式|`boolean`|`true`|
|mode|展示模式，interval表示错行展示|`string`|`interval`|
|gapX|水印之间的水平间距|`number`|`100`|
|gapY|水印之间的垂直间距|`number`|`100`|
|offsetLeft|水印在 canvas 画布上绘制的水平偏移量|`number`|`0`|
|offsetTop|水印在 canvas 画布上绘制的垂直偏移量|`number`|`0`|
|width|单个水印宽度|`number`|`120`|
|height|单个水印高度|`number`|`64`|

---
_Source: https://npm.io/package/@zu1662/watermark · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._