前言
我们会看到很多页面带有水印,但是怎么实现呢?当然可以有多种实现方式,本文主要讲解在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>
</t