@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|