# watermark

**Repository Path**: blog_code/watermark

## Basic Information

- **Project Name**: watermark
- **Description**: 水印
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2022-03-07
- **Last Updated**: 2022-03-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 明文水印

## 效果图

### 静态默认效果

![静态默认效果](https://img-blog.csdnimg.cn/8ebd82eccb014ca5a5f401edc0d4e4d7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6JmO5oiY55S75oif,size_20,color_FFFFFF,t_70,g_se,x_16)

<hr />

### 可防止被手动删除

![可防止被手动删除](https://img-blog.csdnimg.cn/12ad1145b78243af8faa550ac3380b9c.gif)



### 项目中效果

![项目中效果](https://img-blog.csdnimg.cn/85993b43fad44755bd7e5b72581bd34f.gif)

<br />



## 使用

```js
import Watermark from 'watermark-plus';

const watermark = new Watermark({
  // 传参
  content: 'Hello World!',
});

// 创建水印
watermark.create();
```

或者

```js
const { default: Watermark } = require('watermark-plus');

const watermark = new Watermark({
  // 传参
  content: 'Hello World!',
});

// 创建水印
watermark.create();
```

<br />



## API

| 属性            | 说明                                                        | 默认值     | 类型                  |
| --------------- | ----------------------------------------------------------- | ---------- | --------------------- |
| content         | 水印文本【**`必填`**】                                      |            | String                |
| fontWeight      | font-weight                                                 | normal     | String\|Number        |
| fontSize        | font-size 单位px                                            | 14         | String\|Number        |
| fontFamily      | font-family                                                 | sans-serif | String                |
| color           | 水印文本颜色                                                | #666666    | *color*\|*hex*\|*rgb* |
| alpha           | 水印文本透明度 0~1 <br />0: 表示完全透明，1: 表示完全不透明 | 0.15        | String\|Number        |
| width           | 单个水印宽度 单位px                                         | 200        | String\|Number        |
| height          | 单个水印高度 单位px                                         | 200        | String\|Number        |
| rotate          | 水印旋转角度，每个水印以文本中心为原点旋转                  | 330        | String\|Number        |
| zIndex          | z-index                                                     | 2147483647 | String\|Number        |
| onWatermarkNull | 当水印被破坏消失后的回调                                    | alert      | Function              |



<br />



## 兼容性

![兼容性](https://img-blog.csdnimg.cn/d895a29298f441c3997bdd0ac8b4541a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LqU6JmO5oiY55S75oif,size_20,color_FFFFFF,t_70,g_se,x_16)