WaterMark 水印组件

给页面的某个区域加上水印。

何时使用

页面需要添加水印标识版权时使用。

代码演示

自定义配置

这里给出一些通用配置项。如需进一步配置请联系我们。

图片水印

通过 image 指定图片地址。为保证图片高清且不被拉伸,请传入水印图片的宽高 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。

文字水印

通过 content 指定文字水印内容。

API

基础参数

参数说明类型默认值版本
width水印的宽度number1202.2.0
height水印的高度number642.2.0
rotate水印绘制时,旋转的角度,单位 °number-222.2.0
image图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印string-2.2.0
zIndex追加的水印元素的 z-indexnumber92.2.0
content水印文字内容string-2.2.0
fontColor水印文字颜色stringrgba(0,0,0,.15)2.2.0
fontSize文字大小string | number162.2.0

高级参数

参数说明类型默认值版本
markStyle水印层的样式React.CSSProperties-2.3.0
markClassName水印层的类名string-2.3.0
gapX水印之间的水平间距number2122.4.0
gapY水印之间的垂直间距number2222.4.0
offsetLeft水印在 canvas 画布上绘制的水平偏移量, 正常情况下,水印绘制在中间位置, 即 offsetTop = gapX / 2numberoffsetTop = gapX / 22.4.0
offsetTop水印在 canvas 画布上绘制的垂直偏移量,正常情况下,水印绘制在中间位置, 即 offsetTop = gapY / 2numberoffsetTop = gapY / 22.4.0

水印 API 可视化