Skip to content

页面背景水印

简介

很多阅读器，为了防止信息泄露，或者标注版权，通常会设置页面水印，声明版权和用户登录信息等。

实现细节

技术选型

使用第三方库 watermark-dom 实现，版本 1.0.0。

水印实现原理：创建一个图层，设置顶层，半透明显示文字内容，支持鼠标点击穿透即可。

.watermark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 点击穿透 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.watermark .watermark-text {
  opacity: 0.1;
  color: #666;
  width: 200px;
  height: 200px;
  transform: rotate(25deg);
  font-size: 24px;
}

然后把这个图层挂载到界面的某个节点（默认是根节点 body）。

<body>
  <div class="watermark">
    <div class="watermark-text">未授权</div>
    <div class="watermark-text">未授权</div>
    ...
  </div>
</body>

模块实现

1、开启关闭页面水印：在高级设置中，当用户输入水印文字时，界面开启水印效果（此时监听 onChange 事件）然后开启函数节流，避免频繁调用水印函数，通过 ref 获取水印内容。如果水印文本变化，改变界面水印。

onChange = throttle(() => {
  let currentText = this.inputRef.current.value.trim();
  if (currentText.length > 10) {
    alert("水印长度最多10个字");
    return;
  }
  if (currentText !== waterMarkText) {
    eventBus.dispatch("watermark", currentText);
  }
}, 1000);

2、界面显示水印：使用 eventBus 把水印内容，更新到文档组件中，然后文档组件内部获取 ref 对应的节点，更新水印。水印的字号，颜色，间隔固定，目前只改动水印内容。

if (currentText) {
  watermark.load({
    watermark_txt: currentText,
    watermark_alpha: 0.075,
    watermark_parent_node: document.getElementById("#article"),
  });
} else {
  // 实际上，第三方库有点问题，加载 watermark 是正常的，watermark.remove 不生效
  // 最新的版本有问题，目前使用 1.0.0 版本，但是也存在各种问题;
  // 这个库目前停止维护，后续最好换成其他的库
  // watermark.remove();
  location.reload(); //水印去掉需要重新加载页面
}

3、存储水印数据：把水印内容存储在应用中。这个应该是全局的设置（例如显示“未登录”，“测试版”，或者已登录的用户名），这个放在后台配置项中——可以设置默认未开启。

saveWatermark = (txt) => {
  this.config = Object.assign({}, this.config, { watermark_txt: txt });
};

版本历史

1.4 版本基本支持页面水印。

参考文献