简单的水印

@TOC简单的水印

简单的水印

应用场景

需要在网站中，大致背景中写入个人工号的水印，防止员工截图放置公司数据

安装方法

npm i watermark-simple

调用方法

从“水印简单”导入{ WM } ; // WM功能类似一个DIV，可以输入的className，样式的onClick等< WM文本= { “望明” }颜色= { “#ebebeb” } > {道具。儿童} < / / WM >

文件

text（string）：写入需要在当前dom中的水印文本
fontSize（int）：水印文字的大小（至少：16）
color（字符串）：水印文字的颜色色值（默认值：“ rgb（213,213,213）”））
height（int）：个别水印的空间高度（最小：200）
width（int）：个别水印的空间宽度（最小：300）
rotation（int）：旋转的角度（最小：1）

图片示例

简单的水印(方法二)

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’} //必须，水印类型
/>