uxwatermark

轻量型前端水印库，支持全局水印、局部水印，并具备防删、防篡改、防隐藏、防容器大小变化自动适配等功能。基于 canvas + base64，无需依赖服务端。

📦 安装

npm install uxwatermark
# 或
yarn add uxwatermark

⸻

🔧 使用方式

引入

import { useWatermark } from 'uxwatermark'

⸻

🎨 基本用法

📌 全局水印（挂在 body）

import { useWatermark } from 'uxwatermark'

const watermark = useWatermark()

watermark.setWatermark('公司内部资料 禁止外传')

📌 局部水印（挂在指定 DOM 节点）

import { useWatermark } from 'uxwatermark'

const container = document.querySelector('#watermark-container')
const watermark = useWatermark({ el: container })

watermark.setWatermark('专属区域水印')

📌 移除水印

watermark.clearWatermark()

⸻

⚙️ 配置项

配置项        类型            默认值          说明
defense	     Boolean        true            是否开启 DOM 防删监听
color        String       #CCCFD5         水印文字颜色
opacity      Number         0.4	            水印透明度
size         Number         16              字体大小 (px)
family	     String         'serif'         字体
angle        Number         -20             文字旋转角度 (°)
width        Number         300             base64 图片宽度 (px)
height       Number         200             base64 图片高度 (px)
el           HTMLElement    document.body   水印挂载容器

⸻

🧪 测试用例

✅ 全局水印

const wm = useWatermark()
wm.setWatermark('全局水印测试')

✅ 局部水印

const el = document.querySelector('#test-el')
const wm = useWatermark({ el })
wm.setWatermark('局部水印测试')

✅ 自定义配置

const wm = useWatermark()
wm.setWatermark('定制水印', {
  color: '#FF0000',
  opacity: 0.6,
  size: 20,
  angle: -30,
  width: 400,
  height: 250
})

✅ 移除水印

wm.clearWatermark()

⸻

📄 注意事项 • 局部水印挂载容器建议提前设定宽高。 • defense 配置开启时，水印不可删改，否则自动恢复。 • 默认监听容器 resize，自动适配水印尺寸。 • 默认监听 mutation 变化，DOM 被移除或属性被篡改时自动恢复。

⸻

📜 License

MIT