cuitymiko / react-watermark-module

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

react-watermark-module

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

安装

npm i --save react-watermark-module

用法

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

文字水印

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

2、支持任意位置

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

简易API

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

所有API

<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

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

所有API

<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水印，以及更多新的功能，也欢迎你参与项目的迭代。