AWatermark 水印

用于给页面添加水印, 移植自 ant design Watermark组件

安装

使用 npm 或 yarn 安装

npm install @lphal/watermark --save

import AWatermark from '@lphal/watermark';

script标签引入

<script src="watermark.umd.js"></script>

使用

new AWatermark({
  content: '水印内容',
}) 

API

AWatermark 构造函数参数

| 参数 | 说明 | 类型 | 默认值 | |---|---|---|---| | container | 放置水印的容器，默认body | HTMLElement | document.body | | content | 水印内容 | string | string[] | '' | | width | 水印的宽度，content 的默认值为自身的宽度, image的默认宽度为120 | number | - | | height | 水印的高度，content 的默认值为自身的高度，image的默认高度为64 | number | - | | rotate | 水印旋转角度 | number | -22 | | zIndex | 水印元素的层级 | number | 9 | | image | 图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式) | string | - | | font | 文字样式 | Font | Font | | gap | 水印之间的间距 | [number, number] | [100, 100] | | offset | 水印距离容器左上角的偏移量，默认为 gap/2 | [number, number] | [gap[0]/2, gap[1]/2] |

Font

| 参数 | 说明 | 类型 | 默认值 | |---|---|---|---| | color | 文字颜色 | string | rgba(0,0,0,.15) | | fontSize | 文字大小 | number | 16 | | fontWeight | 文字粗细 | normal | light | weight | number | normal | | fontFamily | 文字字体 | string | sans-serif | | fontStyle | 文字样式 | none | normal | italic | oblique | normal |

AWatermark 实例方法

| 方法名 | 说明 | 类型 | |---|---|---| | init | 初始化水印 | () => void | | renderWatermark | 渲染水印 | () => void | | destroyWatermark | 销毁水印 | () => void |