水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。在 Web 应用中，前端水印是一种常见的安全措施，用于保护内容的版权和防止非法复制。根据可见性可分为可见水印（明水印）和不可见水印（暗水印）。
基本概念
明水印： 通过在文本或图像上覆盖另一层图像或文字来实现的。这种水印会明显地出现在页面上，可以用来显示版权信息或其他相关信息。
暗水印： 在文本或图像中隐藏相关信息的一种技术。这种水印不会直接出现在页面上，只有在特殊的程序或工具下才能被检测到。暗水印通常用于保护敏感信息以及追踪网页内容的来源和版本。
实现方式
编辑
前端实现方式
1、html+css 直接覆盖在正文上 【优点】 实现最简单，基本不侵入业务代码【缺点】容易被删除
2、svg 或 canvas 绘制为图片，使用 div 容器覆盖在正文上 【优点】 效果有保证，基本不侵入业务代码 【缺点】 同样容易被删除
3、正文使用 canvas 绘制，水印是正文的一部分 【优点】 效果好，有一定自我保护效果 【缺点】 实现复杂，侵入业务代码
前两者需要做容器或水印内容的防删除或属性修改，保护水印层
第三种一定程度上增大了难度，无法直接删除水印（会同时删除正文）
保护手段
1、防调试（禁止打开开发人员工具，这个可以阻止一下初级用户）
2、MutationObserver 防止修改 dom（目前看效果相对较好，但也不是绝对，可以与上一条结合使用）
鉴于暗水印使用的场景较少，本文结合实际的产品来介绍明水印的实现方案。
基于OnlyOffice的 水印实现
目前被很多团队使用的OnlyOffice，因为没有实现明水印，最近经常接到这类用户的咨询。借此介绍下我们团队的实现方案(开箱即用 文曲Office )，大概的思路如下：
1、根据文本内容、字体、字号、颜色、间距、旋转角度等参数，计算并绘制一个单一的 svg 元素
2、用这个 svg 转换为 base64 格式的图片，防止直接修改内容等
3、在页面正文区域遮盖一个容器，将这张图片放到这个容器内，使用背景平铺方式将水印充满容器
4、将水印容器做事件穿透，防止阻碍正文区鼠标事件响应
5、对这个水印容器做防调试保护
防护的手段需要多条并用，但前端水印总归是无法做到 100% 可靠的，我们只能最大限度做保护。部分场景还可以做前后结合，在正文内容中添加水印。
具体效果如下图：
相关资源
另想下载OnlyOffice最新版本镜像，可访问： OnlyOffice9.0
版本介绍： documentserver 中国版
如果有WebOffice方面的问题或者OnlyOffice定制化需求的都可以加入Q Q群(183026419) 咨询.
