# react-watermark-module

> React水印组件，支持图片水印，文字水印。

Latest version **1.2.0** (published 2018-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-watermark-module
pnpm add react-watermark-module
yarn add react-watermark-module
bun add react-watermark-module
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2018-01-06 |
| First published | 2018-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Author | hyy |
| Maintainers | huangyongyue |

## Links

- npm: https://www.npmjs.com/package/react-watermark-module
- Repository: https://github.com/hyy1115/react-watermark-module
- Homepage: https://github.com/hyy1115/react-watermark-module#readme
- Issues: https://github.com/hyy1115/react-watermark-module/issues
- npm.io page: https://npm.io/package/react-watermark-module

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.0.0
- [watermarkjs](https://npm.io/package/watermarkjs.md) ^2.0.0

## Recent versions

- 1.2.0 (latest) — 2018-01-06
- 1.1.0 — 2018-01-06
- 1.0.0 — 2018-01-06

## README

# react-watermark-module

React水印组件，支持图片水印，文字水印。

### 安装

```npm
npm i --save react-watermark-module
```

### 用法

```javascript
import ReactWatermark from 'react-watermark-module'
const imagePath = require('imagePath.png')
const logoPath = require('logoPath.jpg')
```

### 文字水印

1、支持左上、左下、右上、右下、居中等位置

2、支持任意位置

3、多行文字（暂不支持）

**简易API**
```javascript
<ReactWatermark
    imagePath={} //必须，对象，背景图片
    textData={'红掌拨清波'} //必须，字符串，水印内容
    type={'text'} //必须，水印类型
/>
```

**所有API**
```javascript
<ReactWatermark
    ID={'watermark'} //非必须，字符串，id
    color={'#f00'} //非必须，字符串，水印颜色
    font={'28px serif'} //非必须，字符串，水印字号、字体
    imagePath={} //必须，对象，背景图片
    textData={'红掌拨清波'} //必须，字符串，水印内容
    textPosition={[100, 40]} //水印位置，默认右下角，支持字符串：leftTop、leftBottom、rightTop、rightBottom、center，也支持自定义位置，用数组表示 [x, y]
    transparent={0.4} //非必须，文字透明度
    type={'text'} //必须，水印类型
/>
```

### 图片水印

1、支持左上、左下、右上、右下、居中等位置

2、支持任意位置

3、多个logo水印（暂不支持）

当type是logo时，对文字水印的字体设置无效，请不要混淆。

**简易API**
```javascript
<ReactWatermark
    imagePath={} //必须，对象，背景图片
    logoPath={} //必须，logo水印的路径，用require或import导入
    type={'logo'} //必须，水印类型
/>
```

**所有API**
```javascript
<ReactWatermark
    ID={'watermark'} //非必须，字符串，id
    imagePath={} //必须，对象，背景图片
    logoPath={} //必须，logo水印的路径，用require或import导入
    textPosition={[100, 40]} //水印位置，默认右下角，支持字符串：leftTop、leftBottom、rightTop、rightBottom、center，也支持自定义位置，用数组表示 [x, y]
    transparent={0.4} //非必须，logo透明度
    type={'logo'} //必须，水印类型
/>
```

### 疑问

插件目前只支持单文本和单logo水印，后续有多文本和多logo水印，以及更多新的功能，也欢迎你参与项目的迭代。

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