网站页面水印效果的实现（上）：页面水印的添加

刺骨的言语ヽ痛彻心扉 2024-03-08 04:36 93阅读 0赞

水印，对于互联网来说，已经成为一项非常重要的用来保护知识产权的重要手段。其中，又以像图片水印、文档水印之类的技术，应用的最为广泛。通常情况下，图片或者文档的水印，都是由后端来处理的。但有些情况下，后端处理起来就非常困难了。比如在web项目中，经常能够看到类似于全站页面都被添加了水印的效果：

![dae13f23ebc840b0bd10b41de8ac25f1.png][]

不管你浏览到web服务的哪个页面，又或者是显示的什么图片或文本，水印签名都在。从知识产权保护的角度来看，是非常有必要的，可防止页面信息被盗取、转载，保护知识产权人的利益。

这种效果其实实现起来也不难，对于react来说，如果使用ant design框架的话，会自带watermark水印组件，直接引用即可。但如果使用vue框架，那就比较悲催，目前在vue框架下还没有能够支持像在react下使用ant design中的watermark组件一样便捷的组件产品。所以如果想要实现同样的效果，只能自己造一个组件出来，然后实现。

其实页面水印原理很简单，就是在要展示的页面上方再添加一个遮罩层，在遮罩层上添加水印签名信息，然后将遮罩层背景处理成透明效果，保留签名信息样式不变即可。即便react中使用的ant design框架的watermark水印组件，起实现原理也是一样。

原理很简单，都能想得到，但实际做起来，却还需要考虑很多的问题。比如如何创建水印遮罩层、如何将水印信息灵活方便的应用到指定区域，再比如如何防止前端操作对水印信息的删除等操作，这些都需要考虑在内。

接下来就分两期，给大家介绍一下，一个简单的文字水印组件的构建过程，分别是水印信息的创建/添加和水印防篡改（[网站页面水印效果的实现（下）：页面水印防篡改][Link 1]）。

这一期，先来介绍水印信息的添加，也就是如何创建一个水印组件，能够像ant design框架的watermark组件一样，可以灵活方便的应用到指定区域。

使用环境：vue3 + element plus

首先创建一个自定义watermark组件：

<template>
      <div class="watermark-container" ref="yaken">
        <slot></slot>
      </div>
    </template>
    
    <script setup>
    import CustomWaterMark from '@/util/customWaterMark.js'
    import {defineProps, watchEffect, ref} from "vue"
    
    const yaken = ref(null);
    
    const props = defineProps({
      text: {
        type: String,
        default: 'yaken',
        required: true
      },
      fontSize: {
        type: Number,
        default: 15
      },
      gap: {
        type: Number,
        default: 10
      }
    })
    
    const customWaterMark = CustomWaterMark(props);
    
    watchEffect(() => {
      if (!yaken.value) {
        return;
      } else {
        const {base64, adaptiveSize} = customWaterMark.value;
    
        const customDiv = document.createElement('div');
    
        customDiv.style.backgroundImage = `url(${base64})`;
        customDiv.style.backgroundSize = `${adaptiveSize}px ${adaptiveSize}px`;
        customDiv.style.backgroundRepeat = 'repeat';
        // customDiv.style.width = '100%';
        // customDiv.style.height = '100%';
        customDiv.style.zIndex = '100';
        // 设置绝对定位，以便图片能够填充整个区域
        customDiv.style.position = 'absolute';
        // 子元素相对于父元素的内边距，设置为0代表子元素完全覆盖父元素
        customDiv.style.inset = '0';
        // 必须设置此属性，否则水印遮罩层会阻止下层页面的操作事件
        customDiv.style.pointerEvents = 'none';
    
        yaken.value.append(customDiv);
      }
    })
    
    </script>
    
    <style lang="scss" scoped>
    .watermark-container {
      position: relative;
    }
    </style>

这是一个vue组件，创建了一个div，并通过yaken进行引用，里面添加了slot标签，将来需要被增加水印的区域就会自动填充到这个地方。只需要再创建一个div用于绑定水印签名信息，再根据实际需求进行样式设置，比如重复排列、填充、位置调整等，直至水印签名信息将整个区域填满为止即可。

Js部分，首先引入了一个js对象，具体是什么先不用管，往下看。紧接着又从vue引入了defineProps、 watchEffect和ref组件，这三个具体作用不再赘述，不清楚的老铁可自行百度。然后定义了三个属性，分别是水印的文字信息text、水印字体大小fontSize和水印签名图片间隔gap，gap就是水印签名图片与相邻其他水印图片的距离，可理解为css的margin属性，并可从父组件中接收三个参数值。

接下来调用引入的js方法CustomWaterMark，将属性作为参数传入，得到一个对象customWaterMark。到这里其实大家应该已经猜到了，这个js方法的作用就是根据给定的参数设置，生成水印签名图片。接下来就来实现这个js方法：

import {computed} from "vue";
    
    export default function customWaterMark(props) {
        return computed(() => {
            const canvas = document.createElement('canvas');
            const devicePixelRatio = window.devicePixelRatio || 1;
            const fontSize = props.fontSize * devicePixelRatio;
            const font = fontSize + 'px serif';
            const ctx = canvas.getContext('2d');
    
            ctx.font = font;
            const {width} = ctx.measureText(props.text);
            const canvasSize = Math.max(100, width)+props.gap;
            devicePixelRatio;
            canvas.width = canvasSize;
            canvas.height = canvasSize;
    
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate((Math.PI / 180) * 45);
            ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
            ctx.font = font;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(props.text, 0, 0);
            return {
                base64: canvas.toDataURL(),
                size: canvasSize,
                adaptiveSize: canvasSize / devicePixelRatio
            }
        })
    }

方法通过vue提供的computed创建了一个计算属性，返回根据响应式数据计算后得到的结果。

1.首先创建一个canvas对象，设置一片绘图区域，用于绘制水印签名图片；

2.接下来使用 `window.devicePixelRatio` 属性来处理屏幕像素密度的差异；

3.再根据传入参数 `props.fontSize设置的字体大小`和设备像素比来计算出适当的字体大小；

`4.通过getContext('2d')` 方法获得二维绘图上下文对象；

5.接下来获取文字的宽度、计算图片的尺寸；

6.最后就是设置一下绘图区域的样式信息，如背景色、透明度、旋转画布角度等，并将文字加进去。

到此为止，一个水印签名的图片就创建完成了。最后，将图片的信息返回，包括图片的base64Url信息base64、图片原始尺寸size和图片自适应尺寸styleSize。得到了图片的base64Url信息，就可以在页面生成图片。这个图片自适应尺寸styleSize是为了保持图片清晰度而设置的尺寸，防止由于页面放大而导致水印图片同步放大降低水印清晰度。因此，在watermark组件使用相关参数时都是使用styleSize参数，而不是用图片原始尺寸size。

接下来的问题就是如何将图片信息添加到遮罩层页面，并设置样式，于是就回到了自定义watermark组件后半段最关键的一段代码：

watchEffect(() => {
      if (!yaken.value) {
        return;
      } else {
        const {base64, adaptiveSize} = customWaterMark.value;
    
        const customDiv = document.createElement('div');
    
        customDiv.style.backgroundImage = `url(${base64})`;
        customDiv.style.backgroundSize = `${adaptiveSize}px ${adaptiveSize}px`;
        customDiv.style.backgroundRepeat = 'repeat';
        // customDiv.style.width = '100%';
        // customDiv.style.height = '100%';
        customDiv.style.zIndex = '100';
        // 设置绝对定位，以便图片能够填充整个区域
        customDiv.style.position = 'absolute';
        // 子元素相对于父元素的内边距，设置为0代表子元素完全覆盖父元素
        customDiv.style.inset = '0';
        // 必须设置此属性，否则水印遮罩层会阻止下层页面的操作事件
        customDiv.style.pointerEvents = 'none';
    
        yaken.value.append(customDiv);
      }
    })

这段代码实现了将创建出来的水印图片生成一个布满指定区域的遮罩层的功能：

1.首先使用watchEffect组件将代码块包裹起来，保证内部逻辑涉及到的页面元素已被加载，这里不用onMounted的原因是要为后续水印防篡改做准备，如果不考虑水印安全，也可以使用onMounted；

2.判断yaken引用的对象是否为空，如果为空，说明还没有完成挂载，直接返回；反之则从customWaterMark对象中获取水印签名图片的base64和adaptiveSize属性，并创建一个div

3.为新建的div设置样式，也就是将水印图片按照设置好的样式填满整个div；

4.最后，将这个div组件添加到yaken对象引用的div元素中，作为其子元素显示在页面上。

到此为止，水印签名的创建就完成了。需要注意以下几个问题：

***1.要使用watchEffect方法而不是onMounted处理页面元素逻辑，为后续防篡改做准备：***

***2.要使用js动态加载div元素，不能通过直接在页面添加div标签的方式创建，也是为后续防篡改做准备：***

***3.要使用js动态加载css样式，不能通过class方式添加，还是为后续防篡改做准备：***

***4.要合理设置遮罩层样式中的zIndex属性，保证水印签名遮罩层再最顶层；***

***5.如果想要在设置了水印之后，还不能影响页面的各种操作，必须要设置style的属性pointerEvents为none，否则遮罩层处于最顶层，下层页面各种操作无法实现。***

最后就是使用了，非常简单，将需要添加水印的页面元素包裹在自定义watermark组件内就可以，并通过设置的属性传参：

![95ffb2e210c8490aa73b8bf15358bde6.png][]

可以看到，这里直接将Tabs和router-view标签包裹在自定义水印组件watermark之内，这两个组件所涉及的区域，都将被水印覆盖，同时设置了组件的一个属性text，也就是水印文字信息：

![c504a18d2f0a429ab72d067b04a81695.png][]

router-view标签会根据路由动态将左侧菜单树对应的组件渲染到主窗口，这里可以看到，签名图片完全覆盖了这片区域。左侧菜单其他页面也是同样的效果。

到此为止，一个简单的水印签名组件就创建完成了，实现了水印信息的设置和水印的添加功能。

[下一节，将为大家介绍如何防止水印被攻击和篡改，敬请期待。][Link 2]

[dae13f23ebc840b0bd10b41de8ac25f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/f30211482c284e38b47ce930ed4d122e.png
[Link 1]: http://t.csdn.cn/pFNP7
[95ffb2e210c8490aa73b8bf15358bde6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/3c884bd9bd734d3b8138333c3a928c3d.png
[c504a18d2f0a429ab72d067b04a81695.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/08/9713c27d6509407ab0b15fe03157a732.png
[Link 2]: https://blog.csdn.net/cnttr/article/details/132753327?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132753327%22%2C%22source%22%3A%22cnttr%22%7D