vue+watermark-dom实现页面水印效果

前言

页面水印大家应该都不陌生，它可以用于验证数字媒体的来源和完整性，还可以用于版权保护和信息识别，这些信息可以在不影响媒体质量的情况下嵌入，‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库，教大家实现简单而有效的页面水印效果。

---

watermark-dom

watermark.js 是基于 DOM 对象实现的 BS 系统的水印，确保系统保密性，安全性，降低数据泄密风险，简单轻量，支持多属性配置，动态计算水印，水印防被删（监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加）。

---

特性

• 多属性配置，简单易上手；
• 动态计算水印；
• 水印防被删(监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加)；
• 支持 2 种导入使用：本地引用，npm 引用；
• 水印测试工具：testTool 工具；
• 内置 3 种全局 API 方法：init()，load(), remove()；
• 原理：pointer-events 事件穿透属性，Shadow DOM(影子 DOM)，opacity 等。

---

一、安装

npm install watermark-dom

二、引入

import watermark from 'watermark-dom'

三、内置方法

1. watermark.init(setting)

这个方法用于初始化水印，可以设置水印的样式、内容和位置等参数。

栗子

watermark.init({
  watermark_txt: '测试水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
})

2. watermark.load(setting)

用于手动加载水印。

栗子

const options = {
  watermark_txt: '测试水印',
  watermark_color: 'gray',
  watermark_fontsize: '24px',
}
watermark.load(options)

3. watermark.remove()

这个方法用于移除已加载的水印。

栗子

watermark.remove();

---

四、常用的属性和配置

watermark_id: 'wm_div_id',          //水印总体的id
watermark_prefix: 'mask_div_id',    //小水印的id前缀
watermark_txt:"测试水印",            //水印的内容
watermark_x:20,                     //水印起始位置x轴坐标
watermark_y:20,                     //水印起始位置Y轴坐标
watermark_rows:0,                   //水印行数
watermark_cols:0,                   //水印列数
watermark_x_space:100,              //水印x轴间隔
watermark_y_space:50,               //水印y轴间隔
watermark_font:'微软雅黑',           //水印字体
watermark_color:'black',            //水印字体颜色
watermark_fontsize:'18px',          //水印字体大小
watermark_alpha:0.15,               //水印透明度，要求设置在大于等于0.005
watermark_width:100,                //水印宽度
watermark_height:100,               //水印长度
watermark_angle:15,                 //水印倾斜度数
watermark_parent_width:0,           //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
watermark_parent_height:0,          //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
watermark_parent_node:null          //水印插件挂载的父元素element,不输入则默认挂在body上

---

五、实例代码

<template>
  <div style="height:100vh"></div>
</template>

<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '测试水印内容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
    }
    watermark.load(options)
  },
}
</script>

实现效果

---

六、非全屏展示

watermark_parent_node 属性用于指定水印的父节点，即确定水印应该显示在哪个 DOM 元素的内部。通过设置 watermark_parent_node 属性，可以控制水印的显示位置和范围。例如，如果你想要将水印显示在特定的 div 元素内部，可以将该 div 元素作为 watermark_parent_node。这样，水印将被限制在该 div 元素的范围内显示。

<template>
  <div class="box">
    <div class="topBox"></div>
    <div id="watermarkId" class="cenBox"></div>
    <div class="bomBox"></div>
  </div>
</template>

<script>
import watermark from 'watermark-dom'
export default {
  mounted() {
    const watermarkText = '测试水印内容'
    const options = {
      watermark_txt: watermarkText,
      watermark_color: 'gray',
      watermark_fontsize: '14px',
      watermark_alpha: 0.5,
      watermark_angle: 15,
      watermark_width: 100,
      watermark_height: 20,
      watermark_parent_node: 'watermarkId',
    }
    watermark.load(options)
  },
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100vh;
}
.topBox {
  height: 30vh;
  background: cadetblue;
}
.cenBox {
  height: 50vh;
}
.bomBox {
  height: 20vh;
  background: cornflowerblue;
}
</style>

实现效果