跳转到内容

Watermark 水印

何时使用

  • 页面需要添加水印标识版权时使用。
  • 适用于防止信息盗用。

代码演示

基本

loading

多行水印

loading

图片水印

loading
loading

API

Watermark

参数说明类型默认值版本
width水印的宽度,content 的默认值为自身的宽度number120
height水印的高度,content 的默认值为自身的高度number64
inherit是否将水印传导给弹出组件如 Modal、Drawerbooleantrue5.11.0
rotate水印绘制时,旋转的角度,单位 °number-22
zIndex追加的水印元素的 z-indexnumber9
image图片源,建议导出 2 倍或 3 倍图,优先级高 (支持 base64 格式)string-
content水印文字内容string | string[]-
font文字样式FontFont
gap水印之间的间距[number, number][100, 100]
offset水印距离容器左上角的偏移量,默认为 gap/2[number, number][gap[0]/2, gap[1]/2]

Font

参数说明类型默认值版本
color字体颜色CanvasFillStrokeStyles.fillStylergba(0,0,0,.15)
fontSize字体大小number16
fontWeight字体粗细normal | light | weight | numbernormal
fontFamily字体类型stringsans-serif
fontStyle字体样式none | normal | italic | obliquenormal
textAlign指定文本对齐方向CanvasTextAligncenter5.10.0

基于 MIT 许可发布