【瑞模网】前端基于DOM或者Canvas实现页面水印

前言

我们会看到很多页面带有水印，但是怎么实现呢？当然可以有多种实现方式，本文主要讲解在vue项目中基于DOM或者Cavans实现水印效果，当然还有其他的实现方式，比如在原图片的基础上加上水印生成新的图片，但是这需要后端处理。因为要在vue项目中使用，所以我使用自定义指令可以直接对挂载的dom实现水印效果。

本文实现水印的项目环境为：vue + vite + ts

一、vue自定义指令directive讲解

前面专门有一篇讲解vue2.x与vue3.x中自定义指令详解

二、基于DOM的实现方式

1. 思路整理

• 获取宽高
  （1）获取绑定元素的实际宽度clientWidth
  （2）获取绑定元素实际高度clientHeight
  （3）获取绑定元素的父元素parentElement

• 创建盒子
  （1）创建一个包裹水印图片的盒子
  （2）创建一个水印图片的盒子

• 设置盒子样式
  （1）包裹水印盒子宽高为绑定元素的宽高，即clientWidth、clientHeight
  （2）水印盒子设置背景图、旋转度、宽高、点击穿透

• 设置创建的元素的位置
  （1）水印盒子放到包裹水印图片的盒子里 （包裹水印图片的盒子包裹水印）
  （2）包裹水印图片的盒子放到被绑定元素之前
  （3）被绑定元素放到裹水印图片的盒子里（不然被绑定元素与包裹水印图片的盒子层级同级）

2.新建index.vue

将水印的指令放到标签上，设置标签的宽高。水印可以放大div标签上，也可以是img标签上。注意：img才有onload方法，div标签么有。

<script setup lang="ts">
import { ref } from "vue";
</script>
<template>
    <div class="index-content" >
        <div class="watermaker" v-watermark ></div>
         <!-- <img v-watermark style="width:400px;height:400px" src="../assets/vue.svg" alt=""> -->
    </div>
</template>

<style scoped>
.wate