动态水印需用JavaScript结合Canvas生成base64背景图（防删性强）或动态div（灵活但易删），内容须实时获取用户/设备/业务数据并脱敏，兼顾Safari、打印、移动端兼容性及可视性平衡。
动态内容加水印，核心是让水印随用户状态或内容实时变化，且不能靠静态图片或固定文本应付。纯 CSS 伪元素或 background-image 方案无法满足“动态”要求，必须引入 JavaScript 控制生成逻辑。
用 canvas 绘制 base64 背景水印（防删性最强）
Canvas 绘制的水印最终转成 data:image/png;base64,... 作为 CSS background-image，DOM 中无可见水印节点，审查元素里找不到文字或 div，比纯 JS 插入 div 难删除得多。
- 必须在页面加载后、内容渲染完成前执行，否则可能被后续样式覆盖；建议放在
DOMContentLoaded或requestIdleCallback中调用 - 水印内容需从运行时获取：比如
localStorage.getItem('userId')、new Date().toISOString()、document.referrer等，避免写死 - 注意 canvas 尺寸：全屏水印建议用
window.innerWidth和window.innerHeight，但要监听resize事件并重绘，否则横屏/缩放后错位 - 导出 base64 后，赋值给
document.body.style.backgroundImage，同时设background-repeat: repeat才能平铺；若只设一次，仅覆盖视口区域
document.createElement('div') 动态插入水印层（最灵活，但易被删）
适合需要频繁更新内容（如每 30 秒刷新用户名+时间戳）、或要绑定事件（如点击水印上报）的场景。缺点是 DOM 可见，开发者工具里右键「删除元素」就没了。
- 务必设置
pointer-events: none，否则遮挡所有下方点击和滚动 - 不要用
z-index: 99999这种魔数，应配合现有 UI 的层叠上下文（比如检查父容器是否有position: relative和z-index） - 水印位置建议用
position: fixed+ 多个随机偏移点（如top: 15vh,left: 10vw），再用transform: rotate(-25deg)，比居中单行更难截图规避 - 若页面有 iframe 内容（如文档预览），该水印默认不覆盖 iframe；需额外向 iframe 内注入脚本，或改用 Canvas 全屏背景方案
水印内容怎么动态化？别只写“© Company”
静态水印毫无威慑力。真正有用的动态字段必须来自当前会话上下文，且每次加载不同：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用户维度：
localStorage.getItem('userName')、JWT payload 解析出的sub或email - 设备/环境维度：
navigator.userAgent截取关键标识、screen.width×screen.height组合、performance.now()时间戳（毫秒级） - 业务维度：URL 中的
searchParams.get('docId')、当前页面document.title哈希值 - 避免直接拼接敏感字段（如完整手机号），建议哈希后取前 6 位：
sha256(userId).slice(0,6)
容易被忽略的兼容与体验陷阱
很多水印代码在 Chrome 里跑得欢，一到 Safari 或打印 PDF 就消失，问题常出在细节：
- Safari 对
repeating-linear-gradient的透明度支持不稳定，用 Canvas 方案更稳妥 - 打印时默认不显示
background-image，需加@media print { body { background-image: none !important; } }主动关闭，否则纸面全是水印 - 移动端 viewport 缩放后，
fixed定位水印可能错位，建议用vh/vw单位控制字体大小和间距 - Canvas 绘制大量文字时（如多行斜纹），iOS Safari 可能触发内存警告，应限制行数 ≤ 8，字体大小 ≤ 24px
真正难的是平衡：水印太淡，起不到警示作用；太密太实，用户投诉看不清正文；用 Canvas 性能好但开发成本高；用 JS 插入简单但防护形同虚设。没有银弹，得根据内容敏感度、用户终端分布、运维人力来选组合策略——比如内部系统用 Canvas + 用户 ID，对外文档预览页则 Canvas + 时间戳 + 设备指纹三重叠加。
