水印,对于互联网来说,已经成为一项非常重要的用来保护知识产权的重要手段。其中,又以像图片水印、文档水印之类的技术,应用的最为广泛。通常情况下,图片或者文档的水印,都是由后端来处理的。但有些情况下,后端处理起来就非常困难了。比如在web项目中,经常能够看到类似于全站页面都被添加了水印的效果:
不管你浏览到web服务的哪个页面,又或者是显示的什么图片或文本,水印签名都在。从知识产权保护的角度来看,是非常有必要的,可防止页面信息被盗取、转载,保护知识产权人的利益。
这种效果其实实现起来也不难,对于react来说,如果使用ant design框架的话,会自带watermark水印组件,直接引用即可。但如果使用vue框架,那就比较悲催,目前在vue框架下还没有能够支持像在react下使用ant design中的watermark组件一样便捷的组件产品。所以如果想要实现同样的效果,只能自己造一个组件出来,然后实现。
其实页面水印原理很简单,就是在要展示的页面上方再添加一个遮罩层,在遮罩层上添加水印签名信息,然后将遮罩层背景处理成透明效果,保留签名信息样式不变即可。即便react中使用的ant design框架的watermark水印组件,起实现原理也是一样。
原理很简单,都能想得到,但实际做起来,却还需要考虑很多的问题。比如如何创建水印遮罩层、如何将水印信息灵活方便的应用到指定区域,再比如如何防止前端操作对水印信息的删除等操作,这些都需要考虑在内。
接下来就分两期,给大家介绍一下,一个简单的文字水印组件的构建过程,分别是水印信息的创建/添加和水印防篡改(网站页面水印效果的实现(下):页面水印防篡改)。
这一期,先来介绍水印信息的添加,也就是如何创建一个水印组件,能够像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 {definePr