@zu1662/watermark-react

基于 @zu1662/watermark 的组件封装

使用

# npm
npm install @zu1662/watermark-react

# yarn
yarn add @zu1662/watermark-react

import { Watermark } from '@zu1662/watermark-react';

export default () = > {
  return () => {
    <Watermark {...opts}>
      // your code
    <Watermark>
  }
}

API

基本参数

参数	说明	类型	默认值
visible	水印是否显示	boolean	true
useClientHeight	是否使用元素或者父元素的ClientHeight	boolean	false
image	图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印	string	-
text	水印文本, 为数组时表示多行水印	string | string[]	-
zIndex	水印层级	number	9999
width	单个水印宽度	number	120
height	单个水印高度	number	64
opacity	水印透明度	number	0.15
rotate	旋转的角度	number	-22
fontSize	设置字体大小	number	16
fontWeight	设置字体粗细	number | string	normal
fontStyle	规定字体样式	string	normal
fontVariant	规定字体变体	string	normal
fontColor	设置字体颜色	string	#000
fontFamily	设置水印文字的字体	string	sans-serif

高级参数

参数	说明	类型	默认值
monitor	是否开启保护模式	boolean	true
mode	展示模式，interval表示错行展示	string	interval
gapX	水印之间的水平间距	number	100
gapY	水印之间的垂直间距	number	100
offsetLeft	水印在 canvas 画布上绘制的水平偏移量	number	0
offsetTop	水印在 canvas 画布上绘制的垂直偏移量	number	0
width	单个水印宽度	number	120
height	单个水印高度	number	64