React水印组件,支持图片水印,文字水印

时间:2021-1-8 作者:admin

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。