@yugu/watermark

Watermark 类

• 通用 js 生成水印类，给页面的某个区域加上水印。
• 页面需要添加水印标识版权时使用。
• 适用于防止信息盗用。

注意：该类会给传入的static水印容器添加position:relative;样式，请注意处理。由于汉字和英文书写展示方式不同，多行展示并旋转时可能导致边缘被切割。

该类参考 Ant Design React 项目中 Watermark 组件改写，属性可参考Watermark

Watermark

参数	说明	类型	默认值
width	水印的宽度，content 的默认值为自身的宽度	number	120
height	水印的高度，content 的默认值为自身的高度	number	64
inherit	是否将水印传导给弹出组件如 Modal、Drawer	boolean	true
rotate	水印绘制时，旋转的角度，单位 °	number	-22
zIndex	追加的水印元素的 z-index	number	9
globalAlpha	水印透明度 0-1	number	0.15
image	图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式)	string	-
content	水印文字内容	string | string[]	'菠萝吹雪'
font	文字样式	Font	Font
gap	水印之间的间距	[number, number]	[100, 100]
offset	水印距离容器左上角的偏移量，默认为 0	[number, number]	[0, 0]
isDebug	开启调试，给 canvas clip 添加背景色	boolean	false

API

方法	说明
updateWatermark	更新水印，传入值可选，为 watermark 参数

Font

参数	说明	类型	默认值
color	字体颜色	CanvasFillStrokeStyles.fillStyle	#333
fontSize	字体大小	number	16
fontWeight	字体粗细	normal | light | weight | number	normal
fontFamily	字体类型	string	sans-serif
fontStyle	字体样式	none | normal | italic | oblique	normal
textAlign	指定文本对齐方向	CanvasTextAlign

使用示例

在线示例，点击进入

  import Watermark from '@yugu/watermark'
  const watermark = new Watermark({
    container:'your-dom',
    font:{
      fontSize:22
    },
    ...
  })
  watermark.updateWatermark({
    rotate:0,
    font:{
      fontSize:12
    }
  })