web前端页面水印的实现，防手动删除和修改，支持vue3.0+vite项目

Posted 2023-02-06 止喜

一、实现思路

因为之前负责过公司的后端平台建设，有很多敏感信息，所以有了给前端页面加水印的需求。网上看了一些案例，其实道理都一样，在这里简单记录一下。

1、创建画布

首先，想要绘制水印，我们第一步要创建canvas，拿到画笔，才能开始绘制。

这里注意设置每一块画布的大小，也就是你绘制水印区域的大小。

const canvas = document.createElement('canvas')
canvas.setAttribute('width', 200)
canvas.setAttribute('height', 175)

2、绘制水印样式

接下来，设置水印的字体大小、颜色、样式，以及展示的文本，旋转角度等等基础属性。

// 得到画笔，开始绘制图形
const ctx = canvas.getContext('2d')
ctx.textAlign = 'center'
ctx.font = '16'
ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'
ctx.rotate(Math.PI / 180 * -25)
ctx.fillText("严禁外传", parseFloat(200) / 2, parseFloat(175) / 2)

3、创建包裹水印元素的 div

我们把绘制的水印元素转化成 base64，以背景图的形式放到新创建的 div 上。

const base64Url = canvas.toDataURL() // 得到画的图形的信息
// 创建包裹水印的div
const watermarkDiv = document.createElement('div') 
// 设置水印div的样式
const styleStr =
  `position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:$that.zIndex;
  pointer-events:none;
  background-repeat:repeat;
  background-image:url('$base64Url')`
watermarkDiv.setAttribute('style', styleStr)

4、将绘制的水印 div 添加到页面中

这样，页面上就能看到我们绘制的水印了。

const container = document.body;
container.appendChild(watermarkDiv, this.container.firstChild)

5、水印的防手动删除和修改

我们使用 MutationObserver 来监控水印 dom 是否被修改了。

需要注意的是，MutationObserver API只能用来监控目标节点的变化，目标节点的删除它监控不到，所以我们把MutationObserver的listen事件绑到水印组件的父节点上。

const MutationObserver = window.MutationObserver || window.WebKitMutationObserver
 if (MutationObserver && !this.moServer) 
   this.moServer = new MutationObserver(debounce(() => 
     that.listen()
   , 300)
   )
   this.moServer.observe(this.container, 
     attributes: true,
     subtree: true,
     childList: true
   )
 

二、实现源码及使用方式

根据上述思路，封装成了一个npm库，可以直接使用：watermark-h5

介绍

一款适用于web页面的水印SDK
Add watermark on Web page

• 简单易用，适用于多种项目框架
• 可自定义水印文本，颜色，大小，以及位置
• 监控 DOM 变化，实现水印不可删除
• …

源码地址 ：https://github.com/zttop/watermark-h5

1. 通过script标签引入

使用

// 注意：js需要放body最下面引入，防止初始化失败
<script src="./watermark.min.js"></script>
// 会将对象watermark挂载到全局window对象上

<script>
    watermark.init();
</script>

2. 通过npm安装

安装

npm install watermark-h5 --save

使用

import watermark from 'watermark-h5'

watermark.init()

3. 自定义水印

init()函数支持以下参数：

  parentDomName: string, // 父节点dom选择器名字
  show: boolean, // 水印开关
  color: string, // 水印色值
  title: string, // 显示的水印文本
  width: number, // 水印宽高
  height: number,
  fontNum: number, // 水印字体大小
  rotate: number, // 旋转角度
  zIndex: number, 

// 默认值

defaultConfig = 
    parentDomName: 'body',
    show: true,
    color: 'rgba(0, 0, 0, 0.06)',
    title: '严禁外传',
    width: 200,
    height: 200,
    fontNum: 15,
    rotate: -25,
    zIndex: 9999

4. 删除水印

watermark.clear()

5. 展示水印

watermark.show()

vue3 + vite + ts 项目中使用

可能会有报错：Could not find a declaration file for module 'watermark-h5'.

需要声明一下类型。